el-table 实现可编辑表格

效果如图

代码

<template>
  <div>
        <el-table
          v-loading="listLoading"
          :data="list"
          row-key="id"
          :has-n-o="false"
          :cell-class-name="tableCellClassName"
          @sort-change="sortChange"
          @row-dblclick="dbclick"
        >

          <el-table-column fixed prop="processid" label="编号" align="left" width="150">
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
                :ref="scope.row.index + ',' + scope.column.index"
                v-model="scope.row.processid"
                @blur="hideInput(scope.row)"
              />
              <span v-else>{{ scope.row.processid }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="processtype_name" label="类别" align="left" width="100">
            <template slot-scope="scope">
              <el-select
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
                v-model="scope.row.processtype"
              >
                <el-option
                  v-for="(item, index) in processtypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.enCode"
                />
              </el-select>
              <span v-else>{{ scope.row.processtype_name }}</span>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>
<script>

export default {
  data() {
    return {
      list: [], // 数据
      // 用一个字符串来保存当前双击的是哪一个单元格
      currentCell: null,
    }
  },

  methods: {
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
    // 拼接后类似这样："1,0","1,1",
    dbclick(row, column) {
      this.currentCell = row.index + ',' + column.index
      // input 自动获取焦点
      if (column.property === 'processid_name' || column.property === 'processmoudel_name') {
        // 双击后自动获得焦点
        this.$nextTick(() => {
          this.$refs[row.index + ',' + column.index].focus()
        })
      }
    },
    // 关闭编辑状态
    hideInput(row) {
      this.currentCell = null
    }
  }
}
</script>