前端基础学习-el-table表头自定义添加复选框
在表格列可以通过selection添加复选框,但是对于table的表头,添加复选框需要自定义效果这里主要通过运用element-ui中render-header的属性,在需要自定义的表头添加对应方法html<el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="renderHeader"&g
·
在表格列可以通过selection添加复选框,但是对于table的表头,添加复选框需要自定义
效果
这里主要通过运用element-ui中render-header的属性,在需要自定义的表头添加对应方法
html
<el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="renderHeader">
</el-table>
renderHeader方法
/** 表头增加复选框 */
renderHeader (h, { column }) {
return h(
'span',
[
h('el-checkbox', {
style: 'display:inline-flex;margin-right:15px;',
on: {
change: this.select
}
}),
h('span', column.label)
]
)
},
/** 是否勾选表头 */
select (checked) {
// 如果checked为true则是勾选了对应的表头
console.log(checked)
},
这里相当于createElement创建了新的dom节点自定义表头
select方法则可以判断是否勾选了对应的表头
更多推荐
已为社区贡献4条内容
所有评论(0)