vue + element 可筛选列组件，自定义列样式，超好用

组件代码如下：

//可筛选列的表格，支持自定义每列的样式，加不同的操作列
// 本组件将表格数组内容用tableData传递过来
//columns为表格列结构
//search为“筛选列”按钮左侧的功能组
//fix-column为最后一列操作列的内容
//data-display为给某列加样式的内容
<template>
  <div>
    <div class="flex justify-space">
      <slot name="search"></slot>
      <el-popover placement="right" height="200" trigger="click" style="float: right;">
        <el-checkbox-group v-model="colOptions">
          <el-checkbox
              v-for="item in colSelect"
              :label="item"
              :key="item"
          ></el-checkbox>
        </el-checkbox-group>
        <el-button slot="reference" type="primary" size="small" icon="el-icon-c-scale-to-original" plain>筛选列
        </el-button>
      </el-popover>
    </div>
    <el-table
      ref="multipleTable"
      border
      stripe
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      style="font-size: 13px; margin-top: 20px"
      :header-cell-style="{'background-color' : '#f5f7fa','color':'#000'}"
      max-height="700px"
    >
    <!-- :min-width="item.width" -->
      <el-table-column
        v-for="(item, index) in activeChangeCol" 
        :key="index"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <slot name="data-display" :msg="scope.row" :col="item.prop"></slot>
        </template>
      </el-table-column>
      <slot name="fix-column"></slot>
    </el-table>
  </div>
</template>
<script>
export default {
  props:{
    tableData:{
      type: Array,
      default: function () {
        return [];
      }
    },
    columns:{
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  computed:{
    activeChangeCol: function () {
      return this.columns.filter((col) => {
        return col.isTrue;
      });
    },
  },
  data(){
    return {
      colOptions: this.columns.map(val => {
        if(val.isTrue){
          return val.label
        }else{
          return 
        }
      }),
      colSelect: this.columns.map(val => {
        return val.label
      }),
    }
  },
  watch:{
    colOptions(valArr) {
      let arr = this.colSelect.filter((i) => valArr.indexOf(i) < 0); // 未选中
      this.columns.filter((i) => {
        if (arr.indexOf(i.label) != -1) {
          i.isTrue = false;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        } else {
          i.isTrue = true;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        }
      });
    },
  },
}
</script>
<style scoped>

</style>

调用如下：

      <filter-columns-table :tableData="tableData" :columns="columns">
        <template v-slot:search>
          <div class="search-area">
            <audit-select @fetchDays="fetchDays"></audit-select>
            <el-select v-model="eventType" placeholder="请选择操作类型" size="mini" clearable style="margin:0 5px;">
              <el-option
                v-for="item in eventTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="search">搜索</el-button>
          </div>
        </template>
        <template v-slot:data-display="{msg, col}">
            <el-tooltip v-if="col == 'status'" :content="msg.status" placement="right" :open-delay=300>
              <i v-if="msg.status.toUpperCase()==='UP'"
                  class="el-icon el-icon-success"
                  style="color: #67C23A;font-size: 18px;margin-top: 5px"></i>
              <i v-else class="el-icon el-icon-error" style="color: #F56C6C;font-size: 18px;margin-top: 5px"></i>
            </el-tooltip>
            <div v-else-if="col == 'event_type'">
              <el-tag :type="msg.event_type['type']" size="mini" class="last-time-tag">
                {{ msg.event_type['name'] }}
              </el-tag>
            </div>
            <div v-else>{{ msg[col] }}</div>
        </template>
        <template v-slot:fix-column>
          <el-table-column
            prop="operate"
            label="操作"
            header-align="center"
            min-width="40">
            <template slot-scope="scope">
              <el-tooltip content="记录" placement="top" :open-delay=300>
                <i
                    class="el-icon el-icon-time"
                    style="font-size: 16px;color: #327dff;cursor: pointer"
                    @click="openDrawer(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
      </filter-columns-table>



data(){
return{
  columns: [
//默认显示 isTrue为true的列 
        {
          prop: 'name',
          label: '名字',
          isTrue: true,
        },{
          prop: 'gender',
          label: '性别',
          isTrue: false,
        },{
          prop: 'hobby',
          label: '爱好',
          isTrue: true,
        }
  ]
}}