vue的element的table表頭自定義添加按鈕

添加前的效果

添加后的效果(可以點擊)

1.表頭中具體要添加按鈕的地方引入:render-header="renderHeader"，如下

<el-table-column prop="status" label="狀態" width="150" :render-header="renderHeader"></el-table-column>

2.在methods方法中寫入renderHeader函數

    renderHeader () {
      return (
        <div>
          <el-button size='small' on-click={()=>this.showfilters()}>
          狀態 <span class='el-icon-sort'></span>
          </el-button>
        </div>
      )
    },

注意：其中的這個on-click一定要用箭頭函數來表示，不然會出現觸發不了

3.緊接着在methods中寫入showfilters事件，繼續寫邏輯代碼

 showfilters(){
      var filterdata = [], filterdata_xz = [], filterdata_yx = [], filterdata_gz = [], filterdata_bf = [];

      this.usedata.forEach( val => {
        if(val.status == '閑置'){
          filterdata_xz.push(val)
        }
        if(val.status == '運行'){
          filterdata_yx.push(val)
        }
        if(val.status == '故障'){
          filterdata_gz.push(val)
        }
        if(val.status == '報廢'){
          filterdata_bf.push(val)
        }
      });
      filterdata = filterdata_xz.concat(filterdata_yx, filterdata_gz, filterdata_bf);
      this.usedata = [];
      this.usedata = filterdata;
    },