最近有个需求,需要在每次对 el-table 的单项进行勾选时,使用 @select-change 去调取后台接口,更改表格数据。然而,el-table 的 selection 列有个大 bug。首先,获取后的数据对于 el-table 的 selection 列来说,没有字段 props 可以去接收,这就导致没有数据是选中的,会直接触发 @select-change 方法,回调参数 val 为 []。其次,selection 需要使用 toggleSelection 方法去更改,当更改时,又一次触发 @select-change 方法,这显然不符合需求。因此,需要自定义 table 的表头信息,设置为 el-checkbox。代码如下
// 自定义表头 select
renderHeader(h, {column, $index}) {
return h(“span”, {}, [
h(‘el-checkbox’,{
props: {
checked: this.allchecked
},
on:{
change: this.updateAllSelected // 选中事件
}
})]);
},