本文主要是介绍vue element-ui 可编辑表格，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue element-ui 可编辑表格

轻量级
提供 slot-scope=“scope” 字段名 会提取 prop prop 没有 就需要提供 change-filed-name=“name” name 就是 字段名

   <el-table-column prop="number" label="数字" width="180">
        <template slot-scope="scope">
          <edit-input-number :scope="scope"/>
        </template>
      </el-table-column>

editInput.vue

<template>
  <div @dblclick="dbClickMethod" style="height:36px;">
    <!--  可编写 表格 原理
       1. 提供 行数据
       2. 是否可以开启 isEdit
       3. 双击编写
       4. 回车 或 失去 焦点 @blur -->
    <span v-if="!isShowInput" style="display: block;width: 100%;height: 100%;padding-top: 6px">{{
        (scope.row)[filedName]
      }}</span>

    <el-input size="medium" :style="{height:height,width:width}" @keyup.enter.native="isShowInput=false"
              v-model=" (scope.row)[filedName]" :placeholder="placeholder" v-show="isShowInput" @change="change"
              @blur="isShowInput = false" ref="inputRef"/>
  </div>
</template>

<script>
//可编写表格
export default {
  props: {
    //是否可以开启
    isEdit: {
      type: Boolean,
      default: true,
      required: false,
    },
    //slot-scope="scope"  element-ui提供的 对象
    scope: {
      type: Object,
      required: true,
    },
    //要改变 字段 的 名称
    prop: {
      type: String,
      default: undefined,
      required: false,
    },

    //提供可描述输入的信息
    placeholder: {
      type: String,
      default: "",
      required: false,
    },

    width: {
      type: String,
      default: "100%",
      required: false,
    },
    height: {
      type: String,
      default: "100%",
      required: false,
    }

  },
  data() {
    return {
      isShowInput: false,
      //字段名
      filedName: undefined,
    }
  },
  created() {
    //确定 字段 名
    this.filedName = this.prop? this.prop: this.scope.column.property;
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    change(val) {
      this.$emit("change", val);
    },

    dbClickMethod() {
      if (this.isEdit) {

        this.isShowInput = true;
        //进行 获取焦点
        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
      }
    }

  }
}
</script>

<style scoped>

</style>

editInputNumber.vue

<template>
  <div @dblclick="dbClickMethod" style="height:36px;">
    <!--  可编写 表格 原理
       1. 提供 行数据
       2. 是否可以开启 isEdit
       3. 双击编写
       4. 回车 或 失去 焦点 @blur -->
    <span v-if="!isShowInput" style="display: block;width: 100%;height: 100%;padding-top: 6px">{{
        (scope.row)[filedName]
      }}</span>

    <el-input-number v-focus ref="inputNumberRef" size="medium" v-show="isShowInput" @blur="isShowInput = false"
                     @keyup.enter.native="isShowInput=false"
                     v-model="(scope.row)[filedName]" :controls="controls"
                     :style="{height:height,width:width}" :controls-position="controlsPosition" @change="change"
                     :min="min" :max="max" :precision="precision" :step="step"/>
  </div>
</template>

<script>
//可编写表格
export default {
  props: {
    //是否可以开启
    isEdit: {
      type: Boolean,
      default: true,
      required: false,
    },
    //slot-scope="scope"  element-ui提供的 对象
    scope: {
      type: Object,
      required: true,
    },
    //要改变 字段 的 名称
    prop: {
      type: String,
      default: undefined,
      required: false,
    },
    //宽度
    width: {
      type: String,
      default: "100%",
      required: false,
    },
    //高度
    height: {
      type: String,
      default: "100%",
      required: false,
    },

    //是否有控制器
    controls: {
      type: Boolean,
      default: false,
      required: false,
    },

    //控制器位置
    controlsPosition: {
      type: String,
      default: undefined,
      required: false,
    },

    //最小值
    min: {
      type: Number,
      default: 1,
      required: false,
    },

    //最大值
    max: {
      type: Number,
      default: 9999999,
      required: false,
    },
    //精确小数点后几位
    precision: {
      type: Number,
      default: undefined,
      required: false,
    },
    //每次控制器新增数
    step: {
      type: Float32Array,
      default: undefined,
      required: false,
    },

  },
  data() {
    return {
      isShowInput: false,
      //字段名
      filedName: undefined,
    }
  },
  created() {
    //确定 字段 名
    this.filedName = this.prop? this.prop: this.scope.column.property;
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  methods: {
    change(val) {

      this.$emit("change", val);
    },
    dbClickMethod() {
      if (this.isEdit) {

        this.isShowInput = true;

        //进行 加载好后 获取焦点
        this.$nextTick(() => {
          this.$refs.inputNumberRef.focus()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>

设置为全局 组件

index.js

import editInput from "./editInput";
import editInputNumber from "./editInputNumber";


const customTemplate = {
  install: function (Vue) {
    Vue.component('edit-input', editInput) //注册全局组件
    Vue.component('edit-input-number', editInputNumber) //注册全局组件

  }
}

export default customTemplate

main.js

import customTemplate from "./views/customTemplate"
Vue.use(customTemplate);

这篇关于vue element-ui 可编辑表格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！