elementui表格多选框回显
时间: 2023-11-09 10:59:40 浏览: 126
elementUI多选框反选的实现代码
在elementui表格多选框中进行回显,需要先在数据源中添加一个`selected`字段,用来表示该行数据是否被选中,然后在多选框的`v-model`属性中绑定该字段。当需要进行回显时,只需要将该数据源中的`selected`字段设置为`true`即可。
例如:
```
<template>
<el-table :data="tableData">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', selected: false },
{ name: '李四', selected: true },
{ name: '王五', selected: false },
]
};
}
}
</script>
```
以上代码中,`tableData`中的每条数据都有一个`selected`字段来表示是否被选中。同时,在多选框的`v-model`中绑定该字段:
```
<el-table-column type="selection" width="55" v-model="tableDataSelection"></el-table-column>
```
这样,在表格中选中某些行之后,`tableDataSelection`中就会保存这些行的数据。当需要进行回显时,只需要遍历`tableData`中的每条数据,将`selected`字段设置为与其在`tableDataSelection`中的对应项一致即可。
例如:
```
// 假设已经从接口获取到了选中行的数据
const selectedRows = [
{ name: '李四' },
{ name: '王五' },
];
// 遍历数据源,将选中行的数据进行回显
this.tableData.forEach(row => {
const selectedRow = selectedRows.find(item => item.name === row.name);
row.selected = !!selectedRow; // 将布尔值转换为数字,可以使用 !! 操作符
});
```
阅读全文