el-table使用:render-header方法设置el-checkbox

共计 455 个字符，预计需要花费 2 分钟才能阅读完成。

最近有个需求，需要在每次对 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 // 选中事件
}
})]);
},