ui自定义table表头、修改列标题样式、添加toolti(2)

... renderTip (h,{column}) { return ( <el-tooltip effect="dark" placement="right"> <ul slot="content"> <li>这是第一个提示</li> <li>这是第二个提示<li> </ul> <i></i> </el-tooltip> ); } ...

这样看着很好理解,写起来也很方便

补充:

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/0b01bc8e743fe06893611daa73599b73.html