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;
    },