有時候我們需要實現自定義表頭,例如表頭里加按鈕啥的,這時候就需要用到自定義表頭,但是官方對自定義表頭的使用寫的還是比較簡單,今天就來詳細說說
在需要使用自定義表頭的表頭上使用: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>