el-table自定义筛选表头组件封装

图片效果

代码展示

<template>
  <el-popover
    v-model="visible"
    title="显示的列"
    placement="left"
    width="369"
    :visible-arrow="false"
  >
    <div>
      <div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-button
          type="primary"
          plain
          round
          size="mini"
          style="margin: 3px 0 12px 12px"
          @click="show"
          >恢复默认</el-button
        >
      </div>
      <div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox-button
            class="checkItem"
            v-for="item in tableHeadChoose"
            :label="item"
            :key="item.prop"
            >{{ item.label }}</el-checkbox-button
          >
        </el-checkbox-group>
      </div>
    </div>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" @click="hide">取消</el-button>
      <el-button type="primary" size="mini" @click="ok">确定</el-button>
    </div>
    <div slot="reference" class="right">
      <span class="icon iconfont icon-xiangmuleixing"></span>
      <button class="ml-3 lie">配置显示列</button>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "filterName",
  props: {
    tableHead: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      visible: false,
      isIndeterminate: true,
      checkedCities: [],//显示选中的数据
      checkAll: false,//全选数据
      tableHeadChoose:[],//列表展示
    };
  },
  mounted(){
    this.getTableHeadAll();
    this.show();
  },
  methods: {
     // 显示列
     getTableHeadAll() {
      this.tableHeadChoose = this.tableHead;
    },
    //全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.tableHeadChoose : [];
      this.isIndeterminate = false;
    },
    //选中数据
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableHeadChoose.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableHeadChoose.length;
    },
    //恢复默认
    show() {
      let checkedCount = this.tableHeadChoose.length;
      this.checkAll = checkedCount === this.tableHeadChoose.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableHeadChoose.length;
      this.checkedCities = this.tableHeadChoose;
    },
    //取消
    hide() {
      this.visible = false;
    },
    //确认
    ok() {
      this.visible = false;
      this.$emit("showHead",this.checkedCities);
    },
  },
};
</script>

<style lang="scss" scoped>
 .right {
      position: absolute;
      right: 30px;
      cursor: pointer;
      user-select: none; //取消选中
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      .icon {
        border-radius: 14px;
        background-color: #2b85e4;
        color: #fff;
      }
      .lie {
        display: inline-block;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        user-select: none; //取消选中
      }
    }
::v-deep .el-checkbox-button {
  margin: 10px;
}
::v-deep .el-checkbox-button:first-child .el-checkbox-button__inner {
  border-radius: 0px;
}
::v-deep .el-checkbox-button__inner {
  padding: 4px 5px;
  background-color: rgba(215, 215, 215, 1);
  color: rgba(102, 102, 102, 1);
  border-radius: 0px;
  border-color: transparent;
}
::v-deep .el-checkbox-button.is-focus .el-checkbox-button__inner {
  border-color: transparent;
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  padding: 4px 5px;
  background-color: #2dab79;
  color: #fff;
  border-color: transparent;
}</style>

注意

isIndeterminate和checkAll的值状态:
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾