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