使用 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>