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

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

代码文件结构：

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

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

 

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

              

                

                  :key="index"

                  class="checkbox"

                  :label="option"

                >

              

              

            

          

        

        

          

            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"

          >

          

        

      

    

    

      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"

    >

      

      

      

        :reserve-selection="options.reserveSelection"

        :key="0"

        type="selection"

        :selectable="selectable"

        width="40"

        align="left"

        v-if="options.showCheckBox"

        :resizable="false"

      >

      

      

        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"

      >

        

          

          

            class="operate-group"

            v-if="!operates.dropDown && !operates.isText"

          >

            

              v-for="item in operates.list[0] instanceof Array

                ? operates.list[scope.$index]

                : operates.list"

            >

              

                

                  v-if="item.type === 'switch'"

                  v-model="scope.row[item.prop]"

                  active-color="#13ce66"

                  @change="item.method(scope.$index, scope.row)"

                >

                

                  v-else-if="item.type === 'tooltipIcon'"

                  :enterable="false"

                  effect="light"

                  placement="bottom"

                >

                  {{ item.tooltip }}

                  

                    type="primary" 

                    plain 

                    :icon="item.icon"

                    size="mini" 

                    :disabled="item.disabled"

                    @click="item.method(scope.$index, scope.row)"

                  >

                

                

                  v-else-if="item.type === 'icon'"

                  type="primary" 

                  plain 

                  :icon="item.icon"

                  size="mini" 

                  :disabled="item.disabled"

                  @click="item.method(scope.$index, scope.row)"

                >