vue3 ts 环境下 element-plus el-table 单元格可被编辑

在 Vue3 TS 环境下，使用 Element Plus 的 ElTable 组件，可以通过设置 edit-config 属性来实现单元格可被编辑的功能。具体实现步骤如下：

1. 首先需要安装 Element Plus，可以使用命令 npm install element-plus 安装。

2. 在组件中引入 ElTable 组件，并设置相关属性，如 columns、data 等。

3. 在 ElTable 组件上设置 edit-config 属性，该属性的值为一个对象，包含以下属性：

- trigger：触发编辑的方式，可以是 click、dblclick、manual 中的一个，默认为 click。
- mode：编辑模式，可以是 cell、row 中的一个，默认为 cell。
- showIcon：是否显示编辑图标，默认为 true。
- showTooltip：是否显示编辑提示，默认为 true。
- autoClear：是否在编辑完成后自动清除已编辑的内容，默认为 true。

4. 在 columns 数组中设置需要编辑的列的属性，其中需要设置 editable 属性为 true，表示该列可被编辑。

5. 在组件中实现 handleEdit、handleSave、handleCancel 等方法，分别用于处理编辑、保存、取消操作。

6. 在 ElTable 组件上添加 scopedSlots，用于自定义编辑的单元格内容。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :columns="tableColumns" :edit-config="editConfig">
    <el-table-column label="姓名" prop="name" :editable="true">
      <template #default="{row, column, $index}">
        <div v-if="!column.editing">{{ row.name }}</div>
        <div v-else>
          <el-input v-model="row.name" size="mini"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="年龄" prop="age" :editable="true">
      <template #default="{row, column, $index}">
        <div v-if="!column.editing">{{ row.age }}</div>
        <div v-else>
          <el-input v-model="row.age" size="mini"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row, column, $index}">
        <el-button v-if="!column.editing" type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
        <el-button v-else type="success" size="mini" @click="handleSave(row)">保存</el-button>
        <el-button v-else type="text" size="mini" @click="handleCancel(row)">取消</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElInput } from 'element-plus';

export default defineComponent({
  name: 'EditableTable',
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ],
      tableColumns: [
        { label: '姓名', prop: 'name', editable: true },
        { label: '年龄', prop: 'age', editable: true },
        { label: '操作' }
      ],
      editConfig: {
        trigger: 'click',
        mode: 'cell',
        showIcon: true,
        showTooltip: true,
        autoClear: true
      }
    };
  },
  components: { ElTable, ElTableColumn, ElButton, ElInput },
  methods: {
    handleEdit(row: any) {
      this.$refs.table.toggleRowEdit(row);
    },
    handleSave(row: any) {
      this.$refs.table.toggleRowEdit(row, false);
    },
    handleCancel(row: any) {
      this.$refs.table.toggleRowEdit(row, false);
    }
  }
});
</script>

在上述代码中，我们引入了 ElTable、ElTableColumn、ElButton、ElInput 组件，并在组件中声明了 tableData、tableColumns、editConfig、handleEdit、handleSave、handleCancel 等属性和方法。

在模板中，我们使用 ElTable 组件渲染数据，并设置了可编辑的列和操作列，同时使用 scopedSlots 自定义了编辑的单元格内容。

在脚本中，我们实现了 handleEdit、handleSave、handleCancel 等方法，通过 $refs.table.toggleRowEdit 方法实现编辑的开启、保存、取消等操作。

最终效果为：单击单元格可进行编辑，编辑完成后可保存或取消。