Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

用vue+element ui开发管理系统时，使用el-table做表格，当表格列过多的时候，想要做成可选表头的，实现表格列的筛选显示，效果如下：

代码文件结构：

废话不多说，直接上代码：

第一步：新建名为 TableHeaderRender.vue 的文件

<template>
  <el-popover
    placement="bottom"
    width="200"
    trigger="manual"
    v-model="visible"
    @show="showPopover"
    popper-class="table-header-popover"
  >
    <div class="table-header-popover-template">
      <el-input
        placeholder="请输入内容"
        v-model="value"
        size="small"
        clearable
        @keyup.enter.native="confirm"
        ref="sInput"
      >
        <!-- <el-button slot="append" icon="el-icon-search" @click="confirm"> -->
        <!-- </el-button> -->
      </el-input>
    </div>
    <div class="el-table-filter__bottom">
      <button @click="confirm">筛选</button>
      <button @click="resetData">重置</button>
    </div>
    <span
      slot="reference"
      style="margin-left: 5px"
      @click.stop="popClick"
      v-click-outside="closeOver"
    >
      <i
        class="filter-icon el-icon-search"
        :style="{ color: iconColor ? '#9a4b9b' : '#909399' }"
      ></i>
      <!-- <i class="el-icon-search" :style="{'color':iconColor}" ></i> -->
      <!-- <svg
        viewBox="64 64 896 896"
        data-icon="search"
        width="1em"
        height="1em"
        fill="currentColor"
        :style="{
          color: iconColor ? '#9A4B9B' : '',
          'margin-right': '2px',
          cursor: 'pointer',
        }"
      >
        <path
          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
        ></path>
      </svg> -->
    </span>
  </el-popover>
</template>

<script>
export default {
  name: "tableHeaderRender",
  data() {
    return {
      // input 绑定的值
      value: "",
      visible: false,
      iconColor: false,
    };
  },
  props: {
    tableColumn: {
      type: Object,
      default: () => {},
    },
    columnProp: {
      type: String,
      default: "",
    },
    defaultValue: {
      type: String,
      default: "",
    },
    inputFilteredMap: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    this.value = this.defaultValue;
    this.iconColor = this.value.trim() ? true : false;
  },
  methods: {
    showPopover() {
      this.$nextTick(() => {
        this.$refs.sInput.focus();
      });
    },
    resetData() {
      console.log("reset");
      this.value = "";
      this.visible = false;
      this.iconColor = false;
      const self = this;
      if (this.inputFilteredMap[self.columnProp]) {
        delete this.inputFilteredMap[self.columnProp];
      }
      self.$emit("resetChangeMethod", this.tableColumn, self.columnProp);
    },
    closeOver() {
      this.visible = false;
    },
    popClick(e) {
      // e.stopPropagation()
      this.visible = !this.visible;
    },
    confirm() {
      this.visible = false;
      if (this.value.trim()) {
        this.iconColor = true;
        this.inputFilteredMap[this.columnProp] = this.value;
        this.$emit(
          "filterInputMethod",
          this.tableColumn,
          this.inputFilteredMap
        );
      } else {
        // 如果搜索input输入为空，等同重置
        this.resetData();
      }
    },
  },

  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        function clickHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false;
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e);
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = clickHandler;
        document.addEventListener("click", clickHandler);
      },
      update() {},
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener("click", el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      },
    },
  },
};
</script>

<style>
.filter-icon {
  font-size: 14px;
  color: #909399;
  cursor: pointer;
  font-weight: 400;
}
.table-header-popover {
  padding: 0;
}
.table-header-popover .table-header-popover-template {
  margin: 10px;
}
</style>

第二步：新建名为 operateTable.vue 的文件

<template>
  <div class="operateTable">
    <el-dropdown
      size="small"
      trigger="click"
      v-if="options.columnsSelect || options.columnsTreeSelect"
      class="column-dropdown"
    >
      <el-button style="padding: 9px 10px!important" size="small">
        <i style="font-size: 12px" class="el-icon-menu"></i>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <div style="margin:10px;" class="caoz_ft_warp" v-if="isInit||isSave">
          <el-button
            v-if="isInit"
            size="small"
            type="primary" 
            plain
            style="width:70px;"
            @click="initColumns(true)"
          >初始化</el-button>
          <el-button
            v-if="isSave"
            size="small"
            type="primary" 
            plain
            style="width:70px;"
            @click="$emit('saveSettingColumns',checkedList)"
           >保存</el-button>
        </div>
        <div style="margin:10px;" class="caoz_ft_warp">
          <el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable></el-input>
        </div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="padding-left:10px;">Select All</el-checkbox>
        <el-checkbox-group
          v-if="!options.columnsTreeSelect"
          v-model="checkedList"
          style="max-height: 300px"
          @change="handleCheckedCitiesChange"
        >
          <div class="checkboxScorll">
            <template v-for="(option, index) in checkBoxOptions">
              <template v-if="cloumnKeyword && option.toLowerCase().indexOf(cloumnKeyword.toLowerCase())>-1">
                <el-checkbox
                  :key="index"
                  class="checkbox"
                  :label="option"
                ></el-checkbox>
              </template>
              <template v-else-if="!cloumnKeyword">
                <el-checkbox
                  :key="index"
                  class="checkbox"
                  :label="option"
                ></el-checkbox>
              </template>
              <template v-else></template>
            </template>
          </div>
        </el-checkbox-group>
        <div v-else class="checkboxTree">
          <el-tree
            ref="tree"
            :check-on-click-node="true"
            :data="treeColumn"
            show-checkbox
            node-key="label"
            :default-expanded-keys="defaultExpanded"
            :default-checked-keys="defaultChecked"
            :props="{
              children: 'children',
              label: 'label',
            }"
            @check="checkChange"
            style="max-height: 300px; overflow-y: auto"
          >
          </el-tree>
        </div>
      </el-dropdown-menu>
    </el-dropdown>
    <el-table
      id="iTable"
      ref="operateTable"
      border
      :data="dataSource"
      :stripe="options.stripe"
      :highlight-current-row="options.highlightCurrentRow"
      :max-height="options.maxHeight"
      :size="options.size"
      :fit="options.fit"
      :show-header="options.showHeader"
      :empty-text="options.emptyText"
      :default-sort="options.defaultSort"
      :row-key="getRowKeys"
      :default-expand-all="options.defaultExpandAll"
      :tree-props="options.treeProps"
      :lazy="options.lazy"
      :load="load"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave"
      @cell-click="cellClick"
      @cell-dblclick="cellDblclick"
      @row-click="rowClick"
      @row-contextmenu="rowContextmenu"
      @row-dblclick="rowDblclick"
      @header-click="headerClick"
      @header-contextmenu="headerContextmenu"
      @sort-change="sortChange"
      @select="select"
      @select-all="selectAll"
      @selection-change="checkboxSelected"
      @filter-change="filterChange"
    >
      <slot name="expandRow"></slot>
      <!-- 复选框 -->
      <el-table-column
        :reserve-selection="options.reserveSelection"
        :key="0"
        type="selection"
        :selectable="selectable"
        width="40"
        align="left"
        v-if="options.showCheckBox"
        :resizable="false"
      >
      </el-table-column>
      <el-table-column
        ref="fixedColumn"
        label="操作"
        align="left"
        :width="operates.dropDown ? '50' : operates.width"
        :fixed="operates.fixed"
        :min-width="operates.minwidth"
        :resizable="operates.resizable"
        v-if="operates.list.length > 0"
      >
        <template slot-scope="scope">
          <!-- 操作列 不折叠 全为icon-->
          <div
            class="operate-group"
            v-if="!operates.dropDown && !operates.isText"
          >
            <template
              v-for="item in operates.list[0] instanceof Array
                ? operates.list[scope.$index]
                : operates.list"
            >
              <div class="item" v-if="item.show" :key="item.id">
                <el-switch
                  v-if="item.type === 'switch'"
                  v-model="scope.row[item.prop]"
                  active-color="#13ce66"
                  @change="item.method(scope.$index, scope.row)"
                ></el-switch>
                <el-tooltip
                  v-else-if="item.type === 'tooltipIcon'"
                  :enterable="false"
                  effect="light"
                  placement="bottom"
                >
                  <div slot="content">{{ item.tooltip }}</div>
                  <el-button 
                    type="primary" 
                    plain 
                    :icon="item.icon"
                    size="mini" 
                    :disabled="item.disabled"
                    @click="item.method(scope.$index, scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-button 
                  v-else-if="item.type === 'icon'"
                  type="primary" 
                  plain 
                  :icon="item.icon"
                  size="mini" 
                  :disabled="item.disabled"
                  @click="item.method(scope.$index, scope.row)"
                ></el-button>
              </div>
            </template>
          </div>
          <!-- 操作列 不折叠 全为文字-->
          <div
            class="operate-group"
            v-if="!operates.dropDown && operates.isText"
          >
            <template
              v-for="item in operates.list[0] instanceof Array
                ? operates.list[scope.$index]
                : operates.list"
            >
              <div class="item" v-if="item.show" :key="item.id">
                <el-button
                  size="small"
                  type="text"
                  :disabled="item.disabled"
                  @click.native.prevent="item.method(scope.$index, scope.row)"
                  >{{ item.label }}</el-button
                >
              </div>
            </template>
          </div>
          <!-- 操作列 折叠下拉-->
          <div class="operate-group" v-else-if="operates.dropDown">
            <el-dropdown
              @command="handleCommand"
              trigger="hover"
              placement="bottom-start"
            >
              <span class="el-dropdown-link">
                <i class="el-icon-s-unfold" style="font-size: 16px;"></i>
              </span>
              <!-- 根据operates.list 来渲染操作列下拉的内容 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in operates.list[0] instanceof Array
                    ? operates.list[scope.$index]
                    : operates.list"
                  :disabled="item.disabled"
                  :key="index"
                  :command="composeValue(item, scope.row, scope.$index)"
                  >{{ item.label }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <!--region 数据列-->
      <template v-for="column in columns">
        <!-- :filter-method="column.filters ? column.filterMethod : undefined" -->
        <!-- v-if="
            options.columnsSelect || options.columnsTreeSelect
              ? checkedList.includes(column.label)
              : true
          " -->
        <el-table-column
          v-if="
            options.columnsSelect || options.columnsTreeSelect
              ? checkedList.includes(column.label)
              : true
          "
          :prop="column.prop"
          :key="column.label"
          :label="column.label"
          align="left"
          :width="column.width"
          :min-width="column.minwidth"
          :resizable="column.resizable"
          :sortable="column.sortable"
          :filters="column.filters"
          :filter-method="column.filters ? column.filterMethod : undefined"
          :filtered-value="column.filteredValue"
          :fixed="column.fixed"
          :column-key="column.prop"
        >
          <template slot="header" slot-scope="scope"
            >{{ column.label }}
            <TableHeaderRender
              v-if="column.filterInput"
              :columnProp="column.prop"
              :tableColumn="scope.column"
              :defaultValue="column.defaultValue"
              :inputFilteredMap="inputFilteredMap"
              @filterInputMethod="filterInputMethod"
              @resetChangeMethod="resetChangeMethod"
            ></TableHeaderRender>
          </template>
          <!-- :filtered-value="column.filteredValue" -->
          <template slot-scope="scope">
            <!-- 如果传进来的column没有render函数执行以下代码 -->
            <template v-if="!column.render">
              <!-- 如果传进来的column没有render函数但有formatter函数执行以下代码 -->
              <template v-if="column.formatter">
                <span v-html="column.formatter(scope.row, column)"></span>
              </template>
              <!-- 如果传进来的column既没有render函数也没有formatter函数执行以下代码 -->
              <template v-else>
                <span>{{ scope.row[column.prop] }}</span>
              </template>
            </template>
            <!-- 如果传进来的column有render函数执行以下代码 -->
            <template v-else>
              <expand-dom
                :column="column"
                :row="scope.row"
                :render="column.render"
                :index="scope.$index"
              ></expand-dom>
            </template>
          </template>
        </el-table-column>
      </template>
      <!--endregion-->
    </el-table>
  </div>
</template>

<script>
import TableHeaderRender from "./TableHeaderRender.vue";
export default {
  name: "OperateTable",
  props: {
    // 表格的数据源
    dataSource: {
      type: Array,
      default: () => [],
    },
    // 需要展示的列
    columns: {
      type: Array,
      default: () => [{}],
    },
    // table 表格的控制参数
    options: {
      type: Object,
      default: () => {
        return {
          stripe: true, // 是否为斑马纹 table
        };
      },
    },
    // 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等
    operates: {
      type: Object,
      default: () => {
        return {
          list: [],
        };
      },
    },
    defaultSelectedColumn: {
      type: Array,
      default: () => [],
    },
    defaultColumn: {
      type: Array,
      default: () => [],
    },
    totalColumn: {
      type: Array,
      default: () => [],
    },
    treeColumn: {
      type: Array,
      default: () => [],
    },
    defaultChecked: {
      type: Array,
      default: () => [],
    },
    defaultExpanded: {
      type: Array,
      default: () => [],
    },
    isInit: {
      type: Boolean,
      default: false
    },
    isSave: {
      type: Boolean,
      default: false
    }
  },
  components: {
    TableHeaderRender,
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      },
    },
  },
  data() {
    return {
      cloumnKeyword:"",//字段关键字搜索
      isIndeterminate:true,//全选状态
      checkAll:false,//字段全选
      checkBoxOptions: [], // 全部表头
      checkedList: [], // 选中表头
      count: 0, // 用于判断表格是否刚渲染
      isCheckBoxSort: false, // 用于判断是否是由自定义数据列引发的排序
      // 以下是之前放于vuex中用于记录状态
      preCheckedList: [], // 前一次的checkbox
      // 排序的状态
      sort: {
        prop: "",
        order: "",
        label: "",
      },
      // 筛选的状态
      checkBoxFilteredMap: {},
      // input 所有的筛选
      inputFilteredMap: {},
      // columns label及prop对应的键值对
      columnsLabelMap: {}
    };
  },
  watch: {
    // 监听defaultColumn，若这个发生变化，代表传入的默认column变化，即数据表格发生了切换
    defaultColumn() {
      this.initColumns();
    },
    checkedList() {
      // if(this.checkedList.length>0){
      //   this.$emit("selectedColumn",this.checkedList);
      // }
      // 处理当点击checkbox显示的是排序列时，恢复排序列的显示
      let showLabelArray = this.checkboxShowLabel();
      console.log("showLabelArray", showLabelArray);
      // if (value.length !== 0) {
      //   value.map((item) => {
      //     this.handleStatusRevert(item);
      //   });
      this.columns.map((column, index) => {
        this.handleStatusRevert(column, index, showLabelArray);
      });
    },
  },
  created() {
    this.normalizeColumnsLabelMap();
  },
  mounted() {
    if (!this.options.columnsTreeSelect) {
      this.checkedList = this.$props.defaultColumn;
      this.checkBoxOptions = this.$props.totalColumn;
    } else {
      this.checkedList = this.$refs.tree
        .getCheckedNodes()
        .map((item) => item.label);
    }
    // 挂载时将defaultSort属性传给vuex
    this.handleDefaultSort();
  },
  // 动态切换表头的时候闪烁是因为表头重新计算高度导致的,以下方法解决此bug
  beforeUpdate() {
    this.$nextTick(() => {
      //在数据加载完，重新渲染表格
      this.$refs["operateTable"].doLayout();
    });
  },
  methods: {
    //全选字段
    handleCheckAllChange(val){
      this.checkedList = val ? this.checkBoxOptions : [];
      this.isIndeterminate = false;
    },
    //反选
    handleCheckedCitiesChange(value){
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkBoxOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxOptions.length;
    },
    //初始化字段
    initColumns(flag){
      if(flag){
        this.checkedList = this.$props.defaultSelectedColumn;
      }else{
        this.checkedList = this.$props.defaultColumn;
      }
      this.checkBoxOptions = this.$props.totalColumn;
    },
    // 处理判断checkbox 点击时，显示的是哪个字段名
    checkboxShowLabel() {
      // 判断显示的字段是哪个字段,如果是树形，可能有多个，故更改为数组接收
      let value = [];
      console.log("this.checkedList", this.checkedList);
      if (this.count === 0) {
        this.saveCheckedList(this.checkedList);
        // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
        this.count++;
      } else {
        if (this.checkedList.length > this.preCheckedList.length) {
          for (let index = 0; index < this.checkedList.length; index++) {
            if (!this.preCheckedList.includes(this.checkedList[index])) {
              value.push(this.checkedList[index]);
            }
            // if (this.checkedList[index] !== this.preCheckedList[index]) {
            //   value = this.checkedList[index];
            // }
          }
        }
        this.saveCheckedList(this.checkedList);
        // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
      }
      return value;
    },
    // 处理sort\filterd由隐藏变为显示状态的恢复
    handleStatusRevert(column, index, showLabelArray) {
      let compareLabel = column.label;
      if (showLabelArray.includes(compareLabel)) {
        // 如果是有checkbox 筛选的字段，恢复筛选
        let filteredValue =
          this.checkBoxFilteredMap[this.columnsLabelMap[compareLabel]];
        // 如果是有input 筛选的字段，恢复筛选
        let filteredInputValue =
          this.inputFilteredMap[this.columnsLabelMap[compareLabel]];
        this.columns[index].filteredValue = filteredValue;
        this.columns[index].defaultValue = filteredInputValue;
        this.$nextTick(() => {
          this.$refs.operateTable.store.states.columns.map((column) => {
            if (column.filteredValue && column.filteredValue.length) {
              this.$refs.operateTable.store.commit("filterChange", {
                column,
                values: column.filteredValue,
                silent: true,
              });
            }
          });
        });
      } else {
        this.columns[index].filteredValue = [];
        this.columns[index].defaultValue = "";
      }
      // 如果是有排序的字段，恢复排序
      if (showLabelArray.includes(this.sort.label)) {
        this.$nextTick(() => {
          //在数据加载完，重新渲染表格
          this.isCheckBoxSort = true;
          this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
        });
      }
      /**
      // 如果是有checkbox 筛选的字段，恢复筛选
      let filteredValue = this.checkBoxFilteredMap[this.columnsLabelMap[value]];
      // 如果是有input 筛选的字段，恢复筛选
      let filteredInputValue = this.inputFilteredMap[
        this.columnsLabelMap[value]
      ];
      for (let i = 0; i < this.columns.length; i++) {
        if (this.columns[i].label === value) {
          this.columns[i].filteredValue = filteredValue;
          this.columns[i].defaultValue = filteredInputValue;
          this.$nextTick(() => {
            this.$refs.operateTable.store.states.columns.map((column) => {
              if (column.filteredValue && column.filteredValue.length) {
                console.log("!11");
                this.$refs.operateTable.store.commit("filterChange", {
                  column,
                  values: column.filteredValue,
                  silent: true,
                });
              }
            });
          });
        } else {
          this.columns[i].filteredValue = [];
          this.columns[i].defaultValue = "";
        }
      }
      // for (let i = 0; i < this.columns.length; i++) {
      //   if (this.columns[i].label === value) {
      //     this.columns[i].defaultValue = filteredInputValue;
      //   } else {
      //     this.columns[i].defaultValue = "";
      //   }
      // }
      // 如果是有排序的字段，恢复排序
      if (value === this.sort.label) {
        this.$nextTick(() => {
          //在数据加载完，重新渲染表格
          this.isCheckBoxSort = true;
          this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
        });
      }
      */
    },
    // 处理生成columns 的label prop键值对
    normalizeColumnsLabelMap() {
      this.columns.map((column) => {
        this.columnsLabelMap[column.label] = column.prop;
      });
    },
    filterInputMethod(column, inputFilteredMap) {
      console.log("column, inputFilteredMap", column, inputFilteredMap);
      this.inputFilteredMap = inputFilteredMap;
      this.$emit("filterInputMethod", column, inputFilteredMap);
    },
    resetChangeMethod(tableColumn, columnProp) {
      this.$emit("resetChangeMethod", tableColumn, this.inputFilteredMap);
    },
    cellMouseEnter(row, column, cell, event) {
      this.$emit("cell-mouse-enter", row, column, cell, event);
    },
    cellMouseLeave(row, column, cell, event) {
      this.$emit("cell-mouse-leave", row, column, cell, event);
    },
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    cellDblclick(row, column, cell, event) {
      this.$emit("cell-dblclick", row, column, cell, event);
    },
    rowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    rowContextmenu(row, column, event) {
      this.$emit("row-contextmenu", row, column, event);
    },
    rowDblclick(row, column, event) {
      this.$emit("row-dblclick", row, column, event);
    },
    headerClick(column, event) {
      this.$emit("header-click", column, event);
    },
    headerContextmenu(column, event) {
      this.$emit("header-contextmenu", column, event);
    },
    sortChange(sortObj) {
      this.changeSort(sortObj);
      // this.$componentsStore.commit("table/changeSort", sortObj);
      if (!this.isCheckBoxSort) {
        this.$emit("sort-change", sortObj);
      }
      // 还原isCheckBoxSort
      this.isCheckBoxSort = false;
    },
    handleDefaultSort() {
      if (this.options.defaultSort !== undefined) {
        let column = { label: "" };
        // for (let index = 0; index < this.columns.length; index++) {
        //   if (this.columns[index].prop === this.options.defaultSort.prop) {
        //     column.label = this.columns[index].label;
        //     break;
        //   }
        // }
        column.label = this.columnsLabelMap[this.options.defaultSort.prop];
        this.changeSort({
          ...this.options.defaultSort,
          column,
        });
      }
    },
    // 点击操作的下拉项目后触发事件
    handleCommand(command) {
      if (command.method) {
        command.method(command.index, command.row, command.label);
      }
    },
    // 点击dropDown传参方法
    composeValue(item, row, index) {
      return {
        label: item.label,
        row: row,
        index: index,
        method: item.method,
      };
    },
    select(selection, row) {
      this.$emit("select", selection, row);
    },
    selectAll(selection) {
      this.$emit("select-all", selection);
    },
    checkboxSelected(selection) {
      this.$emit("selection-change", selection);
    },
    selectable(row, index) {
      let data = true;
      this.$emit("selectable", row, index, (val) => {
        data = val;
      });
      return data;
    },
    getRowKeys(row) {
      let data;
      for (let index = 0; index < this.dataSource.length; index++) {
        if (row === this.dataSource[index]) {
          data = index;
          break;
        }
      }
      // this.dataSource.map((item, index) => {
      //   if (row === item) {
      //     data = index;
      //   }
      // });
      this.$emit("row-key", row, (val) => {
        data = val;
      });
      return data;
    },
    load(tree, treeNode, resolve) {
      this.$emit("load", tree, treeNode, resolve);
    },
    // 记录表格总的筛选状态,用于列显示隐藏时保存checkbox状态
    filterChange(filters) {
      let currKey = Object.keys(filters)[0];
      if (filters[currKey].length === 0) {
        delete this.checkBoxFilteredMap[currKey];
      } else {
        this.checkBoxFilteredMap[currKey] = filters[currKey];
      }
      this.$emit("filter-change", filters);
    },
    checkChange(nodeObj, checkObj) {
      this.checkedList = checkObj.checkedNodes.map((item) => {
        return item.label;
      });
    },
    // 之前写在vuex里的方法
    changeSort(sort) {
      this.sort.prop = sort.prop;
      this.sort.order = sort.order;
      this.sort.label = sort.column.label;
    },
    saveCheckedList(preCheckedList) {
      this.preCheckedList = preCheckedList;
    },
  },
};
</script>

<style>
    .operateTable{
        position: relative;
        width: 100%;
    }
    .operateTable .column-dropdown{
        position: absolute;
        right: 0px;
        top: -42px;
        z-index: 99;
    }
    .caoz_ft_warp{
      text-align: center;
    }
    .caoz_ft_warp .el-input.is-active .el-input__inner, .caoz_ft_warp .el-input__inner:focus{
        border-color: #9A4B9B;
        outline: 0;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #9a4b9b;
        border-color: #9a4b9b;
    }
    .el-checkbox__inner:hover {
        border-color: #9A4B9B;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
        border-color: #9A4B9B;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #9A4B9B;
    }
    .checkboxScorll .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #666;
    }
    .column-dropdown .el-button{margin-right: 0 !important;min-width:0;}
    .column-dropdown .el-button:focus, .el-button:hover{
        color: #9A4B9B;
        border-color: #e1c9e1;
        background-color: #f5edf5;
    }
    .checkboxScorll {
        max-height: 300px;
        overflow-y: auto;
    }
    .checkboxScorll .checkbox {
        display: block;
        margin-top: 10px;
        padding-left: 20px;
    }
</style>

第三步：在页面中引入operateTable并使用

<template>
  <div class="tableView">
    <div class="content">
      <operateTable
        v-loading="loading"
        :dataSource="operateTableData"
        :columns="operateTableColumns"
        :options="operateTableOption"
        :defaultColumn="defaultColumns"
        :totalColumn="totalColumns"
        :defaultSelectedColumn="defaultSelectedColumn"
        @sort-change="sortChange"
        @saveSettingColumns="saveSettingColumns"
      ></operateTable>
    </div>
  </div>
</template>

<script>
import operateTable from "./components/operateTable.vue";
export default {
  name: "",
  components: {
    operateTable,
  },
  data() {
    return {
      loading: false,
      operateTableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      operateTableColumns: [
        {
          prop: "action",
          label: "操作",
          width: 100,
          fixed: true,
          render: (h, params) => {
            return h(
              "div",
              {
                class: "operate-group",
              },
              [
                h(
                  "el-tooltip",
                  {
                    props: {
                      content: "处理",
                      placement: "bottom",
                      enterable: false,
                      effect: "light",
                    },
                    class: "item",
                  },
                  [
                    h("i", {
                      props: {},
                      class: "el-icon-edit",
                      on: {
                        click: () => {
                          console.log(params.row);
                        },
                      },
                    }),
                  ]
                ),
              ]
            );
          },
        },
        {
          prop: "date",
          label: "日期",
          minwidth: 150,
          sortable: "custom",
        },
        {
          prop: "name",
          label: "姓名",
          minwidth: 150,
          sortable: "custom",
        },
        {
          prop: "address",
          label: "地址",
          minwidth: 150,
          sortable: "custom",
        },
      ],
      operateTableOption: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否要高亮当前行
        columnsSelect: true,
        maxHeight: 300,
      },
      defaultColumns: ["操作", "日期", "姓名", "地址"],
      totalColumns: ["操作", "日期", "姓名", "地址"],
      //所有用户默认勾选的列  用于初始化
      defaultSelectedColumn: [],
    };
  },
  methods: {
    //表头排序
    sortChange(column, prop, order) {
      if (column.order === "ascending") {
        this.orderfield = column.prop;
        this.orderby = "ASC";
      } else if (column.order === "descending") {
        this.orderfield = column.prop;
        this.orderby = "DESC";
      } else {
        this.orderfield = "";
        this.orderby = "";
      }
      //   this.getTabldHandle();
    },
    //保存自定义字段
    saveSettingColumns(data) {
      console.log(data);
    },
  },
  mounted() {},
};
</script>

<style>
.tableView {
  width: 100%;
  height: 100%;
}
.content {
  padding: 60px;
}
.disableIcon {
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>