巧妙使用 Vue.extend 继承组件实现 El-table 双击可编辑（不使用 v-if 和 v-else）

前端

2023-10-16 10:48:39

El-table 中的双击可编辑：一个全面指南

简介

在 Vue.js 中，El-table 组件是一个功能强大的工具，用于创建和管理表格数据。然而，默认情况下，它不支持双击可编辑的功能。为了启用此功能，我们需要一些技巧。

继承 El-table 组件

Vue.js 中的 Vue.extend 方法允许我们继承现有组件并创建自定义版本。我们可以利用此功能来创建自定义的 El-table 组件，该组件具有双击可编辑的功能。

创建自定义组件

我们称之为 EditableElTable 的新组件继承自 El-table 组件。它重写了 handleDoubleClick 方法，该方法在双击单元格时触发。

const EditableElTable = Vue.extend({
  extends: ElTable,
  methods: {
    handleDoubleClick(row, column, event) {
      // 判断单元格是否可编辑
      if (column.editable) {
        // 创建一个输入框组件
        const inputComponent = new Vue({
          template: '<input v-model="value" @blur="handleBlur" />',
          data() {
            return {
              value: row[column.prop]
            };
          },
          methods: {
            handleBlur() {
              // 更新表格数据
              row[column.prop] = this.value;
              // 销毁输入框组件
              this.$destroy();
            }
          }
        });
        // 挂载输入框组件
        inputComponent.$mount(event.target);
      }
    }
  }
});

使用自定义组件

现在我们已经创建了 EditableElTable 组件，就可以在 Vue.js 应用中使用它了。在模板文件中，我们用 EditableElTable 替换 El-table：

<editable-el-table :data="tableData" @row-dblclick="handleRowDblclick">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</editable-el-table>