vue中elementui自定义表头并且添加事件

最新推荐文章于 2024-06-07 10:52:19 发布

weixin_33935777

最新推荐文章于 2024-06-07 10:52:19 发布

阅读量8.7k

点赞数

文章标签： javascript python ui ViewUI

原文链接：https://my.oschina.net/andyfeng/blog/1814837

版权

2019独角兽企业重金招聘Python工程师标准>>>

需求：

自定义表格的表头，然后添加一个checkbox 选中的时候，展示所有的，去掉的时候，不展示所有的

在代码中可以理解为自定义elementui表格的表头，并且添加事件

渲染是事件

//添加自定义方法  renderProductId
<el-table-column show-overflow-tooltip prop="productId" label="照片关联货号" min-width="200" 
:render-header="renderProductId">

//在渲染表头的时候，会调用此方法，h为createElement的缩写版  添加on.change事件即可
renderProductId(h, {column}) {
    return h('span', [
        h('span', column.label),
        h('el-checkbox',
            {
                style: 'margin-left: 5px;',
                on: {
                    change: this.change
                }
        }),
    ]);
},
change(val) {
    console.log(val);
}

参考：

https://segmentfault.com/q/1010000011970694

https://www.cnblogs.com/mengfangui/p/8072842.html

http://www.runoob.com/jsref/met-document-createelement.html

http://www.w3school.com.cn/xmldom/met_document_createelement.asp

转载于:https://my.oschina.net/andyfeng/blog/1814837