el-table双击修改单元格的值(完整代码)

el-table双击修改单元格的值(完整代码)

给数据里加一个show属性即可，双击的时候显示true，失去焦点的时候隐藏false

完整代码：

<template>
  <el-table :data="tableData" border style="user-select: none;" :key="key" @cell-dblclick="doubleClick">

    <el-table-column prop="date" label="日期" width="300">
      <template slot-scope="scope">
        <el-date-picker
            v-focus v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)" placeholder="选择日期时间">
        </el-date-picker>
        <span v-else>{{ scope.row.date }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="other" label="单选" width="300">
      <template slot-scope="scope">
        <el-select
            v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.other"
            v-focus
            filterable
            collapse-tags
            @keyup.enter.native="selectVisible($event, scope.row, scope.column)" @visible-change="selectVisible($event, scope.row, scope.column)"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span v-else>{{ scope.row.other }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="name" label="多选" width="300">
      <template slot-scope="scope">
        <el-select
            v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.name"
            v-focus
            multiple
            filterable
            collapse-tags
            @keyup.enter.native="selectVisible($event, scope.row, scope.column)" @visible-change="selectVisible($event, scope.row, scope.column)"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span v-else>{{ String(scope.row.name) }}</span>
      </template>
    </el-table-column>

    <el-table-column prop="address" label="地址">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row[scope.column.property + 'Show']" 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>
</template>

<script>

export default {
  name: 'Test',
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus();
      }
    }
  },
  data() {
    return {
      key: Math.random(),
      tableData: [{
        date: '2016-05-02 00:00:00',
        other: '选项1',
        name: ['选项1'],
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04 00:00:00',
        other: '选项1',
        name: ['选项1'],
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01 00:00:00',
        other: '选项1',
        name: ['选项1'],
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03 00:00:00',
        other: '选项1',
        name: ['选项1'],
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      options: [{
        value: '选项1',
      }, {
        value: '选项2',
      }, {
        value: '选项3',
      }, {
        value: '选项4',
      }, {
        value: '选项5',
      }],
      value: ['选项1', '选项2']
    }
  },
  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) {
      // 异步处理，因为blur事件会比change事件先执行
      setTimeout(() => {
        row[column.property + 'Show'] = false
        this.updateTable()
        // 请求后台更改数据
      }, 100)
    },
    // 下拉框显示事件
    selectVisible(val, row, column) {
      if (val === false) {
        setTimeout(() => {
          row[column.property + 'Show'] = false
          this.updateTable()
          // 请求后台更改数据
        }, 100)
      }
    },
    // 更新表格
    updateTable() {
      this.key = Math.random()
    },
  }
}
</script>

结果