plus el-table半选

### Element UI el-table 实现半选功能 在 `Element UI` 的表格组件 (`el-table`) 中实现半选功能主要依赖于 `selection-change` 事件以及自定义逻辑处理。通过监听选择变化并手动控制全选框的状态，可以达到半选的效果。 为了实现这一目标，需要维护一个额外的数据结构用于跟踪哪些行被部分选择了。下面是一个具体的实现方案： #### 主要思路 1. 使用 `reserve-selection` 属性保持页面切换时不丢失已选项。 2. 自定义列模板中的复选框行为。 3. 利用 `select` 和 `toggleSelection` 方法管理单个或多个项目的选中状态。 4. 计算当前页是否有未全部勾选的情况来决定顶部全选按钮是否显示为半选。 #### 示例代码 ```html <template> <div id="app"> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 复选框 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 数据展示列 --> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <!-- 底部工具栏 --> <span slot="footer" class="dialog-footer"> 已选 {{ selectedRows.length }} 条记录 </span> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, // ...其他数据项... ], multipleSelection: [], // 存储所有选中的行 allSelected: false, // 是否已经完全选中 isIndeterminate: true // 半选状态标记 }; }, computed: { selectedRows() { const ids = this.multipleSelection.map(item => item.id); return this.tableData.filter(row => ids.includes(row.id)); } }, methods: { handleSelectionChange(selection) { this.multipleSelection = selection; this.allSelected = selection.length === this.tableData.length; this.isIndeterminate = selection.length > 0 && selection.length < this.tableData.length; // 更新表头的选择框样式 if (this.$refs.multipleTable) { this.$nextTick(() => { this.$refs.multipleTable.clearSelection(); selection.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row, true); }); }); } } } }; </script> ``` 此示例展示了如何创建具有半选功能的多选表格，并且提供了基本的操作方法。需要注意的是，在实际应用中可能还需要考虑分页、过滤等因素对选择的影响[^1]。