el-table 复选框回显
时间: 2024-05-04 08:14:13 浏览: 376
复选框
el-table 是 Element UI 中的一个表格组件,而复选框回显是指在 el-table 中使用复选框进行多选操作后,再次打开表格时,已选中的项能够显示为选中状态。
要实现 el-table 复选框回显,可以按照以下步骤进行操作:
1. 在 el-table 的列定义中,添加一个带有 type 属性为 "selection" 的列,用于显示复选框。
2. 在 el-table 的数据源中,为每一条数据添加一个属性,用于表示该项是否被选中。
3. 在 el-table 的模板中,使用 v-model 指令绑定每一行数据的选中状态。
4. 在 el-table 的 mounted 钩子函数中,根据数据源中的选中状态,将已选中的项设置为选中状态。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, selected: true },
{ name: '李四', age: 25, selected: false },
{ name: '王五', age: 30, selected: true },
],
};
},
mounted() {
this.tableData.forEach((item) => {
if (item.selected) {
this.$refs.multipleTable.toggleRowSelection(item, true);
}
});
},
};
</script>
```
在上述示例中,tableData 数组中的每一项都添加了一个 selected 属性,用于表示该项是否被选中。在 mounted 钩子函数中,通过遍历 tableData 数组,将 selected 为 true 的项设置为选中状态。
阅读全文