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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理