el-table的selection-change和select-all

### el-table 中 `selection-change` 和 `select-all` 的区别及用法 #### 一、事件定义与触发条件 `selection-change` 是当用户手动选择或取消选择某一行或多行时触发的事件，参数为当前选中的所有行的数据数组。此事件适用于单个行的选择操作以及部分行的选择变化。 ```javascript // 当前选中行发生变化时调用的方法 handleSelectionChange(selection) { console.log('Selected rows:', selection); } ``` 相比之下，`select-all` 则是在全选按钮被点击或者取消全选时触发的事件[^2]。它不仅影响到所有的可见行，还可能涉及到分页场景下的其他页面数据处理逻辑。 #### 二、具体使用方法 对于 `selection-change` 来说，在绑定该事件之后可以通过回调函数实时获取最新的已选记录列表： ```vue <template> <el-table @selection-change="handleSelectionChange"> <!-- 表格列配置 --> </el-table> </template> <script> export default { methods: { handleSelectionChange(selectedRows) { this.selectedItems = selectedRows; } }, }; </script> ``` 而针对 `select-all` ，如果需要自定义行为比如限制某些特定条件下不允许全选，则可以在其对应的钩子内加入额外判断逻辑并阻止默认动作执行[^1]: ```javascript toggleSelectAll(checked) { const allSelectableRows = this.tableData.filter(row => row.selectable === true); if (allSelectableRows.length !== this.tableData.length && checked) { alert("存在不可选项目,无法完成全部勾选"); return false; } else { this.$refs.multipleTable.toggleAllSelection(); } } ``` 注意上述例子假设有一个名为 selectable 属性用于控制每条目是否可参与多选机制。 另外值得注意的是 `$nextTick()` 方法经常配合这些交互一起运用以便于更新视图层面上的状态同步问题。 #### 三、实际应用案例对比分析 下面给出一段综合演示两者差异性的代码片段: ```vue <template> <div id="app"> <el-button @click="clearSelection">Clear Selection</el-button> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="onSelectionChange" @select-all="onSelectAll"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { tableData: [ { name: 'John', age: 28 }, { name: 'Jane', age: 34 }, { name: 'Jim', age: 29 } ], multipleSelection: [] }; }, methods:{ clearSelection(){ this.$refs.multipleTable.clearSelection(); }, onSelectionChange(val){ console.log('Current Selected Rows via selection-change Event:', val); this.multipleSelection=val; }, onSelectAll(selectStatus){ console.log(`All items are ${selectStatus?'selected':'deselected'} through select-all event.`); // Additional logic here... } } }); </script> ``` 在此范例里，“Clear Selection”按键会清除现有的任何高亮标记；每当发生个别单元格或是整批资料变动的时候都会分别打印对应的消息至开发者工具面板上供观察学习之用。 ---