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

最近有个需求,需要在每次对el-table的单项进行勾选时,使用@select-change去调取后台接口,更改表格数据。
然而,el-tableselection列有个大bug。
首先,获取后的数据对于el-tableselection列来说,没有字段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 // 选中事件 
          }
        })]);
    },
    原文作者:鱼是乎
    原文地址: https://segmentfault.com/a/1190000018824256
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞