首页elementplus el-table 勾选回显

elementplus el-table 勾选回显

时间: 2024-09-06 09:01:00 浏览: 121

Element Plus 的 `el-table` 组件提供了一个方便的功能，允许你在表格中实现勾选框的复选状态保存和显示。当你在表格中设置 `type="selection"` 或者配置了 `row-select` 属性，并配合 `@select` 和 `@deselect` 事件处理，可以实现在数据更新后保持之前选中的行状态。当用户选择某一行并提交表单后，你可以将选中的行数据ID或者其他标识存储到服务器端，然后再次从服务器获取数据时，通过比较已存储的数据和新数据，找出哪些行需要被选中并显示为已勾选状态。例如： ```html <template> <el-table :data="tableData" @select="handleSelect" @deselect="handleDeselect">  <el-table-column type="selection"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [], // 数据数组，包含id或其他标识字段 selectedIds: [] // 存储已选中行的标识 }; }, methods: { handleSelect(row) { this.selectedIds.push(row.id); // 保存选中行的标识 }, handleDeselect(row) { const index = this.selectedIds.indexOf(row.id); if (index > -1) { this.selectedIds.splice(index, 1); // 移除已取消选中的行 } } }, created() { // 如果有预加载数据并且需要回显勾选状态，这里可以根据selectedIds重新设置tableData的状态 this.tableData.forEach((item) => { item.checked = this.selectedIds.includes(item.id); // 判断是否在已存标识列表内 }); } }; </script> ```

阅读全文