Vue 动态生成Table 双击Table进行修改

表格样式

其中地区这一列为非编辑区，其余两列为可编辑区，双击这两列的单元格时可以编辑修改

实现细节

定义列的数据结构

其中columnName的值为列名称，pro对应的值为接口返回的json对象的key.

  columns: [  
        {
    
    
          columnName: '地区',
          prop: 'area'
        },
        {
    
    
          columnName: '常住人口(万人）',
          prop: 'peopleNum'
        },
        {
    
    
          columnName: '城镇化率（%）',
          prop: 'cityRate'
        },  
      ],

接口返回数据

接口返回的是一个数组，我们用tableData来表示

[
    {
    
    
        "area":"全国",
        "peopleNum":"",
        "cityRate":""
    },
    {
    
    
        "area":"湖南省",
        "peopleNum":"",
        "cityRate":""
    }
]

表格生成

注意@cell-dblclick就是双击表格时，相应双击事件。

  <el-table @cell-dblclick="handleCellDBClick" :data="tableData" border>
          <!-- 生成列-->
          <el-table-column align="center" v-for="column in columns" :key="column.prop"
                           :label="column.columnName">
            <template slot-scope="scope">
              <!-- 双击时展示input，save实现数据保存-->
              <el-input :id="column.prop" type="number" v-if="scope.row.isEdit === column.prop"
                        v-model="scope.row[column.prop]"
                       @keyup.enter.native="save(scope)"/>
              <span v-else :class="[scope.row.id ? '' : 'summary']">{
   
   {
                   scope.row[column.prop]
                }}</span>
            </template>
          </el-table-column>
        </el-table>

其中handleCellDBClick就是双击实现可编辑的核心逻辑：原理里就是双击时设置当然row的isEdit属性为当前列columnName,这样的话
v-if="scope.row.isEdit === column.prop"就成立，那么input标签就展示了出来。

   handleCellDBClick(row, column, cell, event) {
    
    
      const columnName = column.property
      const unEditColumns = ['area']
      //如果点击的是地区这一列，则提示不可编辑
      if (unEditColumns.includes(columnName)) {
    
    
        return this.$modal.msgError('当前列不给编辑')
      }
      //设置isEdit属性
      this.$set(row, 'isEdit', columnName)
    
      this.$nextTick(() => {
    
    
        //input标签获取焦点
        document.getElementById(columnName).focus()
      })
    },

当我们点击enter时，需要将修改的数据进行保存，那么就需要实现 @keyup.enter.native方法

    save({
    
    row, column}, val, eventStr) {
    
    
      //数据复位，此时input隐藏，展示span
      this.$set(row, 'isEdit', null)
      //调用后台接口保存数据
    },