记录element filters筛选表格列

data中

columnList: [
	{ show: true, prop: "partners", label: "加盟商名称" },
	{ show: true, prop: "phone", label: "电话" },
    { show: true, prop: "cityCode", label: "城市" },
    { show: true, prop: "vehicleBrand", label: "合作商资质" },
    { show: true, prop: "preliminary", label: "预估成本（区间）" },
    { show: true, prop: "rechargeAmount", label: "总充值金额" },
    { show: true, prop: "consumptionAmount", label: "消耗金额" },
    { show: true, prop: "balance", label: "剩余金额" },
    { show: true, prop: "nikeName", label: "归属员工" },
    { show: true, prop: "status", label: "推送状态" },
    { show: true, prop: "createTime", label: "上线时间" },
],
filterList:[],

挂载函数

mounted() {
    this.getFilterList()
    let list = this.$refs.filterTable.columns;
    // 找出默认要显示的列
    let filteredList = this.columnList.map(item => {
      if (item.show) {
        return item.label;
      }
    });
    list[list.length - 1].filteredValue = filteredList;
  },

methods方法

filterFn(filters) {
   let arr = [];
   for (const key in filters) {
     if (Object.hasOwnProperty.call(filters, key)) {
       arr = filters[key];
     }
   }
   let arr2 = arr.filter(Boolean);//剔除掉undefined
   if (arr2.length > 0) {
     this.columnList.forEach(ele => {
       if (arr.indexOf(ele.label) > -1) {
         ele.show = true;
       } else {
         ele.show = false;
       }
     });
   } else {//重置时表格的筛选条件会置空
     this.columnList.forEach(ele => {
	    ele.show = true;
     });

     //重新赋值默认显示的列
     let list = this.$refs.filterTable.columns;
     let filteredList = this.columnList.map(item => {
       if (item.show) {
         return item.label;
       }
     });
     // filtered-value 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。
     list[list.length - 1].filteredValue = filteredList;
   }
 },
 getFilterList(){
     this.filterList = this.columnList.map(ele => {
       return {
           text:ele.label,
           value:ele.label
       }
     });
 },

页面

<el-table ref="filterTable" :data="tableData" @filter-change="filterFn">
  <template v-for="item in columnList">
    <af-table-column :key="item.prop" :label="item.label" v-if="item.show" align="center">
      <template slot-scope="scope">
        <span>{{scope.row[item.prop]}}</span>
      </template>
    </af-table-column>
  </template>
  <af-table-column label="操作/筛选" align="center" width="220" fixed="right" :filters="filterList" filter-placement="bottom-end">
    <div slot-scope="scope">
      <el-button size="mini" type="primary" round @click="recharge(scope.row.id,scope.row.partners)">充值</el-button>
      <el-button size="mini" type="success" round @click="updated(scope.row)">更新</el-button>
      <el-button @click="deleteMaterial(scope.row.id,scope.row.partners)" size="mini" type="danger" round>删除</el-button>
    </div>
  </af-table-column>
</el-table>

重要的是el-tabel标签中的ref="filterTable"和@filter-change=“filterFn”
操作列中的:filters=“filterList” filter-placement=“bottom-end”
修改el-table的highlight样式
在element-ui.scss中

.el-table th>.cell.highlight {
  color: white;
}