Double click to edit the cell of el-table

1. Target effect

        The source code is all written in App.vue and main.js, just copy and paste!

         Before double-clicking the cell

        Double click in the cell and modify the cell data

        

        cell loses focus

2. Principle explanation

(1) Refer to the official documentation for the cell double-click event:

(2) The el-table refresh requires that the key bound to the el-table will only be refreshed if it changes

(3) How to control the display and hiding of the specified cell?

        Check out what are the row and column of cell-dblclick (row, column)? are all objects

         We can add an attribute to the row to uniquely identify the data of a certain row. When double-clicking, make this special attribute true, and when the input box loses focus, set the special attribute to false, and the display and hiding of the input box are through v-if and special property binding.

        

   

(4) @keyup.enter.native is the carriage return event, @blur is the out-of-focus event, and both point to the same method to complete subsequent interface requests 

 

(5) When double-clicking the table, it is also necessary to avoid additional refresh of the table, and multiple input boxes are displayed, the following judgments should be made 

(6) Register custom focus commands globally

 

3. Source code

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>