vue element table实现可编辑

项目是一个vue项目使用的是element-ui

要求table页面直接点击表格就可以编辑关闭后可以保存

实现效果是点击（双击\单击）展示出输入框，鼠标离开后可以保存修改并还原成原来的样子

话不多说先展示点代码：

          <el-table-column v-for="(column,index) in columns" :key="index" :label="column.name" cell-mouse-enter="">
            <template slot-scope="scope">
              <div @click="DoubleChange(scope.$index)" @mouseleave="leaveChange(scope.$index)">
                <el-input v-if="editable[scope.$index]"
                          v-model="tableData[scope.$index]['amount'+column.name]"></el-input>
                <span v-else>{{tableData[scope.$index]['amount'+column.name]}}</span>
<!--                <span v-if="tableData[scope.$index]['amount'+column.name] === '' && !editable[scope.$index]">无</span>-->
              </div>
            </template>
          </el-table-column>

解释：首先将数据读出循环每一列就不过细解释，主要解释插槽内部，使用vue插槽的功能将原始需要展示的写入通过v-if控制显示input还是span 外部div定义双击函数 DoubleChange(scope.$index)函数传入这一行的下标editable[scope.$index]数组中存入的是true和false为了展示

DoubleChange(row)函数：

 //双击之后展示input框
      DoubleChange(row) {
        for (let i = 0; i < 16; i++) {
          if (i === row) {
            this.editable[row] = true;
            this.$set(this.editable, row, true)
            // this.$refs.focusName.focus();
          } else {
            this.editable[i] = false;
            // this.$set(this.editable, row, false)
          }
        }
      },

解释：通过scope.$index传入第几行改变editable数组中的值，this.$set()函数是为了刷新数组，vue对于这样的数组改变需要刷新。

leaveChange(row) 函数

 leaveChange(row) {
        this.editable[row] = false;
        this.$set(this.editable, row, false)
      },