vue+element+checkbox自定义表头（粘贴可用）

效果展示 ：

 

 

 源码:粘贴可用

 

<template>
  <div>
    <el-popover placement="top-start" title="自定义表头" width="200" trigger="click">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
        <el-checkbox v-for="item in tableLabel" :label="item.param" :key="item.param">{
  {item.label}}</el-checkbox>
      </el-checkbox-group>
      <el-button slot="reference" icon="el-icon-setting">自定义</el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      }
    },
    hiddenString: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      checkAll: false,
      checkedList: [],
      isIndeterminate: true
    };
  },
  created() {
    this.dataAnalysis();
  },
  methods: {
    dataAnalysis() {
      //选中数据
      let hiddenCheckedList = this.$getStorage(this.hiddenString);
      this.checkedList = [];
      if (hiddenCheckedList) {
        let array = hiddenCheckedList;
        for (let index = 0; index < array.length; index++) {
          this.checkedList.push(array[index]);
        }
      } else {
        let array = this.tableLabel;
        for (let index = 0; index < array.length; index++) {
          if (array[index].show) {
            this.checkedList.push(array[index].param);
          }
        }
      }
      //样式判断
      this.checkAll = this.checkedList.length === this.tableLabel.length;
      this.isIndeterminate =
        this.checkedList.length > 0 &&
        this.checkedList.length < this.tableLabel.length;
    },
    handleCheckAllChange(value) {
      if (value) {
        this.checkedList = [];
        this.tableLabel.forEach(element => {
          this.checkedList.push(element.param);
        });
      } else {
        this.checkedList = [];
      }
      this.isIndeterminate = false;
      this.$setStorage(this.hidde