双击编辑el-table的单元格

1、目标效果

        源码全部写在App.vue和 main.js中，复制粘贴即可！

         未双击单元格前

        双击单元格中，并修改单元格数据

        

        单元格失去焦点

2、原理解释

（1）单元格双击事件参考官方文档：

（2）el-table刷新要求绑定el-table的key要发生变化才会刷新

（3）如何控制指定单元格的显示与隐藏？

        查看一下cell-dblclick（row, column）的row、column是什么？都是对象

         我们可以往row里面添加一个属性来唯一标识某一行的数据，双击时使这特殊属性为true，输入框失去焦点时则设置特殊属性为false，并且输入框的显示与隐藏通过v-if与特殊属性绑定。

        

   

（4）@keyup.enter.native为回车事件、@blur为失焦事件，两个指向同一个方法，完成后续接口请求 

 

（5）双击表格时还要避免额外刷新表格、以及多个输入框处于显示状态，要做如下判断 

（6）全局注册自定义焦点指令

 

3、源码

main.js 

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);

// 全局自定义指令
Vue.directive('focus', {
  inserted(el, binding) {
    el.querySelector('input').focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" :key="key" @cell-dblclick="doubleClick">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.address"
            @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)"></el-input>
          <span v-else>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>

export default {
  name: 'App',
  data() {
    return {
      key: Math.random(),
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    // 双击单元格触发事件
    doubleClick(row, column) {
      // 避免点击过快导致多个输入框处于焦点状态
      row[column.property + 'Show'] = false

      // 避免点击其他单元格导致表格刷新 
      if (!['address'].includes(column.property)) return
      row[column.property + 'Show'] = true
      this.updateTable()
    },
    //输入框失焦事件
    onBlur(row, column) {
      row[column.property + 'Show'] = false
      this.updateTable()

      // 请求后台更改数据
    },
    //更新表格
    updateTable() {
      this.key = Math.random()
    },
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>