Vue dynamically generates Table, double-click Table to modify

table style

Among them, the region column is a non-editable area, and the other two columns are editable areas. When double-clicking the cells of these two columns, you can edit and modify them.

implementation details

Define the data structure of the column

The value of columnName is the column name, and the corresponding value of pro is the key of the JSON object returned by the interface.

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

Interface returns data

The interface returns an array, which we use tableData to represent

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

form generation

Note that @cell-dblclick is the corresponding double-click event when the table is double-clicked.

  <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>

Among them, handleCellDBClick is the core logic of double-clicking to realize editability: the principle is to set the isEdit attribute of the row to the current column columnName when double-clicking, and if this is the case, the input
v-if="scope.row.isEdit === column.prop"label will be displayed.

   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()
      })
    },

When we click enter, we need to save the modified data, then we need to implement @keyup.enter.nativethe method

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