赞
踩
有时候我们需要实现自定义表头,例如表头里加按钮啥的,这时候就需要用到自定义表头,但是官方对自定义表头的使用写的还是比较简单,今天就来详细说说
在需要使用自定义表头的表头上使用:render-header来启用自定义表头:
<el-table-column :render-header="button"></el-table-column>
button是一个自定义方法,里面可以返回按钮。
需注意:button方法里面返回的按钮元素,给它添加点击方法不能用@click或v-on:click,无法识别,会报错。要用箭头函数的写法 on-click={()=>this.showinfo()}
这里设置了1个按钮,有个变量来记录当前点击的是哪个按钮:
data(){
return{
isShow: true // 控制按钮的变量,点击按钮
}
},
methods: {
button(){
if(this.isShow==true){
// 如果点击了按钮,就给按钮切换背景色
return (
<div>
<el-button on-click={()=>this.show()} style="background: #ffc9c9; color:#606266">按钮</el-button>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。