vue3+ts实现表格单元格编辑功能

使用 el-table-plus 中的 el-switch 组件来控制表格的可编辑状态，并且使用 el-table-plus 组件显示表格。通过 :edit-table 属性来控制表格是否可编辑，而 :edit-config 属性用来配置编辑时的样式和允许编辑的列。当 switch 组件的状态发生改变时，会触发 handleSwitchChange 方法来更新表格的可编辑状态。当表格中的单元格数据发生改变时，会触发 handleCellChange 方法，可以在这个方法中对单元格数据进行处理。

<template>
  <div>
    <!-- 使用 Switch 组件控制表格是否可编辑 -->
    <el-switch v-model="editable" @change="handleSwitchChange"></el-switch>
    <!-- 使用 el-table-plus 组件显示表格 -->
    <el-table-plus
      :data="tableData"
      :edit-table="editable"
      :edit-config="editConfig"
      @cell-change="handleCellChange"
    >
      <!-- 定义表格列 -->
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table-plus>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        { name: '张三', age: 30 },
        { name: '李四', age: 25 },
        { name: '王五', age: 40 }
      ],
      // 控制表格是否可编辑的开关状态
      editable: false,
      // 表格编辑配置
      editConfig: {
        // 允许编辑的列
        editables: ['name', 'age'],
        // 编辑时的样式
        editCellStyle: {
          backgroundColor: '#f7f7f7'
        }
      }
    };
  },
  methods: {
    // 处理 Switch 组件状态改变事件
    handleSwitchChange(editable) {
      this.editable = editable;
    },
    // 处理表格单元格数据改变事件
    handleCellChange({ row, column, value }) {
      console.log('Cell changed:', row, column, value);
      // 在这里可以对单元格数据进行处理，比如保存到后端或者做其他操作
    }
  }
};
</script>