vue 使用 elementui 双击单元格修改数据

cell-dblclick

当某个单元格被双击击时会触发该事件

row, column, cell, event

具体实例：

<template>
   <div>
      <el-table :data="list" @cell-dblclick="editTable"> //双击修改数据cell-dblclick
         <el-table-column
            label="id"
            prop="id"
         />
         <el-table-column
            label="名称"
            prop="name"
         />
         <el-table-column
            label="排序"
            prop="sort"
         >
            <template v-slot="scope">
               <el-input
                  @blur="changeSort(scope.row)"
                  @keyup.enter.native="changeSort(scope.row)"
                  v-show="scope.row.editor" 
                  :pattern="/^[0-9]*$/"
                  v-model.number="scope.row.sort"/>
               <span v-show="!scope.row.editor">{{ scope.row.sort }}</span>
            </template>
         </el-table-column>
      </el-table>
   </div>
</template>
<script>
export default {
   data() {
      return {
         list: [],
         params: {} //存储即将要修改的值
      }
   },
   mounted() {
      this.getList()
   },
   methods: {
      getList() {
         this.list = [
            {id: 1, name: 'aaa', editor: false, sort: 1},
            {id: 2, name: 'bbb', editor: false, sort: 2},
            {id: 3, name: 'ccc', editor: false, sort: 3}
         ]
      },
      
      editTable(row, column, cell, event) {
         //取消隐藏
         cell.children[0].children[0].style = {'display': ''};
         //获取该dom元素
         let cellInput = cell.children[0].children[0].children[0];
         //获取焦点
         cellInput.focus()
         row.editor = true //用来判断是否显示编辑框
         this.params = { //将即将要修改的值存储进来
            id: row.id,
            sort: row.sort
         }
      },
      changeSort(row) {
         let params = { //修改后的值
            id: row.id,
            sort: row.sort
         }
         //若修改前后的数据一致，则认为未修改，不走方法
         if (params.id === this.params.id && params.sort === this.params.sort) {
            row.editor = false //不显示编辑框
         } else {
            //走方法修改并关闭编辑框
            // testUpdate(params).then(response => {
            //     if (response.code === 200) {
            //        row.editor = false
            //        this.$modal.msgSuccess('修改成功')
            //     }
            // })
         }
      },
   }
}
</script>