element-ui表格篩選，根據表頭屬性顯示隱藏列

效果：

步驟：

1、標簽上添加要過濾的源數組

<el-table-column
    label="標簽"
    :filters="filterList"
    filter-placement="bottom-end"
>

//   表格列
columnList: [
    { show: true, prop: "date", label: "日期" },
    { show: true, prop: "name", label: "姓名" },
    { show: true, prop: "age", label: "年齡" },
    { show: false, prop: "address", label: "地址" }
],

getFilterList(){
    this.filterList = this.columnList.map(ele => {
        return {
            text:ele.label,
            value:ele.label
        }
    });
}

2、找出默認要顯示的過濾項

let list = this.$refs.filterTable.columns;

// 找出默認要顯示的列
let filteredList = this.columnList.map(item => {
    if (item.show) {
    return item.label;
    }
});
list[list.length - 1].filteredValue = filteredList;

3、當表格的篩選條件發生變化的時候過濾表格列

//當表格的篩選條件發生變化的時候會觸發該事件
    filterFn(filters) {
      let arr = [];
      for (const key in filters) {
        if (Object.hasOwnProperty.call(filters, key)) {
          arr = filters[key];
        }
      }
      let arr2 = arr.filter(Boolean);//剔除掉undefined
      console.log(arr2);
      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 => {
          if (["日期", "姓名", "年齡"].indexOf(ele.label) > -1) {
            ele.show = true;
          } else {
            ele.show = false;
          }
        });

        //重新賦值默認顯示的列
        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;
      }
    },

完整代碼：

<template>
  <div>
    <el-table ref="filterTable" :data="tableData" @filter-change="filterFn" style="width: 100%">
      <template v-for="item in columnList">
        <el-table-column :key="item.prop" :label="item.label" v-if="item.show">
          <template slot-scope="scope">
            <span>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        label="標簽"
        :filters="filterList"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions
          >{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          age: 18,
          address: "上海市普陀區金沙江路 1518 弄",
          tag: "家"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          age: 18,
          address: "上海市普陀區金沙江路 1517 弄",
          tag: "公司"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          age: 18,
          address: "上海市普陀區金沙江路 1519 弄",
          tag: "家"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 18,
          address: "上海市普陀區金沙江路 1516 弄",
          tag: "公司"
        }
      ],
    //   表格列
      columnList: [
        { show: true, prop: "date", label: "日期" },
        { show: true, prop: "name", label: "姓名" },
        { show: true, prop: "age", label: "年齡" },
        { show: false, prop: "address", label: "地址" }
      ],
      filterList:[]
    };
  },
  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
      console.log(arr2);
      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 => {
          if (["日期", "姓名", "年齡"].indexOf(ele.label) > -1) {
            ele.show = true;
          } else {
            ele.show = false;
          }
        });

        //重新賦值默認顯示的列
        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
          }
        });
    }
  },
  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;
  }
};
</script>