Haga doble clic para editar la celda de el-table

1. Efecto objetivo

        El código fuente está escrito en App.vue y main.js, ¡simplemente copie y pegue!

         Antes de hacer doble clic en la celda

        Haga doble clic en la celda y modifique los datos de la celda.

        

        la celula pierde el foco

2. Explicación del principio

(1) Consulte la documentación oficial para el evento de doble clic en la celda:

(2) La actualización de la tabla electrónica requiere que la clave vinculada a la tabla electrónica solo se actualice si cambia

(3) ¿Cómo controlar la visualización y ocultación de la celda especificada?

        Compruebe cuáles son la fila y la columna de cell-dblclick (fila, columna)? son todos objetos

         Podemos agregar un atributo a la fila para identificar de forma única los datos de una determinada fila. Al hacer doble clic, haga que este atributo especial sea verdadero, y cuando el cuadro de entrada pierda el foco, establezca el atributo especial en falso, y la visualización y ocultación de el cuadro de entrada es a través de v-if y enlace de propiedad especial.

        

   

(4) @keyup.enter.native es el evento de retorno de carro, @blur es el evento fuera de foco y ambos apuntan al mismo método para completar las solicitudes de interfaz posteriores 

 

(5) Al hacer doble clic en la tabla, también es necesario evitar una actualización adicional de la tabla, y se muestran varios cuadros de entrada, se deben hacer los siguientes juicios 

(6) Registre comandos de enfoque personalizados globalmente

 

3. Código fuente

principal.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')

aplicación.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>