// 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等。defaultColumns: ["操作", "日期", "姓名", "地址"],totalColumns: ["操作", "日期", "姓名", "地址"],_el-table 列头可选">
devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Gausst松鼠会 | 2024-04-02 18:56:22

赞

踩

el-table 列头可选

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

代码文件结构：

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

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

  1. <template>
  2.   <el-popover
  3.     placement="bottom"
  4.     width="200"
  5.     trigger="manual"
  6.     v-model="visible"
  7.     @show="showPopover"
  8.     popper-class="table-header-popover"
  9.   >
  10.     <div class="table-header-popover-template">
  11.       <el-input
  12.         placeholder="请输入内容"
  13.         v-model="value"
  14.         size="small"
  15.         clearable
  16.         @keyup.enter.native="confirm"
  17.         ref="sInput"
  18.       >
  19.         <!-- <el-button slot="append" icon="el-icon-search" @click="confirm"> -->
  20.         <!-- </el-button> -->
  21.       </el-input>
  22.     </div>
  23.     <div class="el-table-filter__bottom">
  24.       <button @click="confirm">筛选</button>
  25.       <button @click="resetData">重置</button>
  26.     </div>
  27.     <span
  28.       slot="reference"
  29.       style="margin-left: 5px"
  30.       @click.stop="popClick"
  31.       v-click-outside="closeOver"
  32.     >
  33.       <i
  34.         class="filter-icon el-icon-search"
  35.         :style="{ color: iconColor ? '#9a4b9b' : '#909399' }"
  36.       ></i>
  37.       <!-- <i class="el-icon-search" :style="{'color':iconColor}" ></i> -->
  38.       <!-- <svg
  39.         viewBox="64 64 896 896"
  40.         data-icon="search"
  41.         width="1em"
  42.         height="1em"
  43.         fill="currentColor"
  44.         :style="{
  45.           color: iconColor ? '#9A4B9B' : '',
  46.           'margin-right': '2px',
  47.           cursor: 'pointer',
  48.         }"
  49.       >
  50.         <path
  51.           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"
  52.         ></path>
  53.       </svg> -->
  54.     </span>
  55.   </el-popover>
  56. </template>
  57.  
  58. <script>
  59. export default {
  60.   name: "tableHeaderRender",
  61.   data() {
  62.     return {
  63.       // input 绑定的值
  64.       value: "",
  65.       visible: false,
  66.       iconColor: false,
  67.     };
  68.   },
  69.   props: {
  70.     tableColumn: {
  71.       type: Object,
  72.       default: () => {},
  73.     },
  74.     columnProp: {
  75.       type: String,
  76.       default: "",
  77.     },
  78.     defaultValue: {
  79.       type: String,
  80.       default: "",
  81.     },
  82.     inputFilteredMap: {
  83.       type: Object,
  84.       default: () => {},
  85.     },
  86.   },
  87.   created() {
  88.     this.value = this.defaultValue;
  89.     this.iconColor = this.value.trim() ? true : false;
  90.   },
  91.   methods: {
  92.     showPopover() {
  93.       this.$nextTick(() => {
  94.         this.$refs.sInput.focus();
  95.       });
  96.     },
  97.     resetData() {
  98.       console.log("reset");
  99.       this.value = "";
  100.       this.visible = false;
  101.       this.iconColor = false;
  102.       const self = this;
  103.       if (this.inputFilteredMap[self.columnProp]) {
  104.         delete this.inputFilteredMap[self.columnProp];
  105.       }
  106.       self.$emit("resetChangeMethod", this.tableColumn, self.columnProp);
  107.     },
  108.     closeOver() {
  109.       this.visible = false;
  110.     },
  111.     popClick(e) {
  112.       // e.stopPropagation()
  113.       this.visible = !this.visible;
  114.     },
  115.     confirm() {
  116.       this.visible = false;
  117.       if (this.value.trim()) {
  118.         this.iconColor = true;
  119.         this.inputFilteredMap[this.columnProp] = this.value;
  120.         this.$emit(
  121.           "filterInputMethod",
  122.           this.tableColumn,
  123.           this.inputFilteredMap
  124.         );
  125.       } else {
  126.         // 如果搜索input输入为空，等同重置
  127.         this.resetData();
  128.       }
  129.     },
  130.   },
  131.  
  132.   directives: {
  133.     clickOutside: {
  134.       bind(el, binding, vnode) {
  135.         function clickHandler(e) {
  136.           // 这里判断点击的元素是否是本身，是本身，则返回
  137.           if (el.contains(e.target)) {
  138.             return false;
  139.           }
  140.           // 判断指令中是否绑定了函数
  141.           if (binding.expression) {
  142.             // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
  143.             binding.value(e);
  144.           }
  145.         }
  146.         // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
  147.         el.__vueClickOutside__ = clickHandler;
  148.         document.addEventListener("click", clickHandler);
  149.       },
  150.       update() {},
  151.       unbind(el, binding) {
  152.         // 解除事件监听
  153.         document.removeEventListener("click", el.__vueClickOutside__);
  154.         delete el.__vueClickOutside__;
  155.       },
  156.     },
  157.   },
  158. };
  159. </script>
  160.  
  161. <style>
  162. .filter-icon {
  163.   font-size: 14px;
  164.   color: #909399;
  165.   cursor: pointer;
  166.   font-weight: 400;
  167. }
  168. .table-header-popover {
  169.   padding: 0;
  170. }
  171. .table-header-popover .table-header-popover-template {
  172.   margin: 10px;
  173. }
  174. </style>

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

  1. <template>
  2.   <div class="operateTable">
  3.     <el-dropdown
  4.       size="small"
  5.       trigger="click"
  6.       v-if="options.columnsSelect || options.columnsTreeSelect"
  7.       class="column-dropdown"
  8.     >
  9.       <el-button style="padding: 9px 10px!important" size="small">
  10.         <i style="font-size: 12px" class="el-icon-menu"></i>
  11.         <i class="el-icon-arrow-down el-icon--right"></i>
  12.       </el-button>
  13.       <el-dropdown-menu slot="dropdown">
  14.         <div style="margin:10px;" class="caoz_ft_warp" v-if="isInit||isSave">
  15.           <el-button
  16.             v-if="isInit"
  17.             size="small"
  18.             type="primary" 
  19.             plain
  20.             style="width:70px;"
  21.             @click="initColumns(true)"
  22.           >初始化</el-button>
  23.           <el-button
  24.             v-if="isSave"
  25.             size="small"
  26.             type="primary" 
  27.             plain
  28.             style="width:70px;"
  29.             @click="$emit('saveSettingColumns',checkedList)"
  30.            >保存</el-button>
  31.         </div>
  32.         <div style="margin:10px;" class="caoz_ft_warp">
  33.           <el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable></el-input>
  34.         </div>
  35.         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="padding-left:10px;">Select All</el-checkbox>
  36.         <el-checkbox-group
  37.           v-if="!options.columnsTreeSelect"
  38.           v-model="checkedList"
  39.           style="max-height: 300px"
  40.           @change="handleCheckedCitiesChange"
  41.         >
  42.           <div class="checkboxScorll">
  43.             <template v-for="(option, index) in checkBoxOptions">
  44.               <template v-if="cloumnKeyword && option.toLowerCase().indexOf(cloumnKeyword.toLowerCase())>-1">
  45.                 <el-checkbox
  46.                   :key="index"
  47.                   class="checkbox"
  48.                   :label="option"
  49.                 ></el-checkbox>
  50.               </template>
  51.               <template v-else-if="!cloumnKeyword">
  52.                 <el-checkbox
  53.                   :key="index"
  54.                   class="checkbox"
  55.                   :label="option"
  56.                 ></el-checkbox>
  57.               </template>
  58.               <template v-else></template>
  59.             </template>
  60.           </div>
  61.         </el-checkbox-group>
  62.         <div v-else class="checkboxTree">
  63.           <el-tree
  64.             ref="tree"
  65.             :check-on-click-node="true"
  66.             :data="treeColumn"
  67.             show-checkbox
  68.             node-key="label"
  69.             :default-expanded-keys="defaultExpanded"
  70.             :default-checked-keys="defaultChecked"
  71.             :props="{
  72.               children: 'children',
  73.               label: 'label',
  74.             }"
  75.             @check="checkChange"
  76.             style="max-height: 300px; overflow-y: auto"
  77.           >
  78.           </el-tree>
  79.         </div>
  80.       </el-dropdown-menu>
  81.     </el-dropdown>
  82.     <el-table
  83.       id="iTable"
  84.       ref="operateTable"
  85.       border
  86.       :data="dataSource"
  87.       :stripe="options.stripe"
  88.       :highlight-current-row="options.highlightCurrentRow"
  89.       :max-height="options.maxHeight"
  90.       :size="options.size"
  91.       :fit="options.fit"
  92.       :show-header="options.showHeader"
  93.       :empty-text="options.emptyText"
  94.       :default-sort="options.defaultSort"
  95.       :row-key="getRowKeys"
  96.       :default-expand-all="options.defaultExpandAll"
  97.       :tree-props="options.treeProps"
  98.       :lazy="options.lazy"
  99.       :load="load"
  100.       @cell-mouse-enter="cellMouseEnter"
  101.       @cell-mouse-leave="cellMouseLeave"
  102.       @cell-click="cellClick"
  103.       @cell-dblclick="cellDblclick"
  104.       @row-click="rowClick"
  105.       @row-contextmenu="rowContextmenu"
  106.       @row-dblclick="rowDblclick"
  107.       @header-click="headerClick"
  108.       @header-contextmenu="headerContextmenu"
  109.       @sort-change="sortChange"
  110.       @select="select"
  111.       @select-all="selectAll"
  112.       @selection-change="checkboxSelected"
  113.       @filter-change="filterChange"
  114.     >
  115.       <slot name="expandRow"></slot>
  116.       <!-- 复选框 -->
  117.       <el-table-column
  118.         :reserve-selection="options.reserveSelection"
  119.         :key="0"
  120.         type="selection"
  121.         :selectable="selectable"
  122.         width="40"
  123.         align="left"
  124.         v-if="options.showCheckBox"
  125.         :resizable="false"
  126.       >
  127.       </el-table-column>
  128.       <el-table-column
  129.         ref="fixedColumn"
  130.         label="操作"
  131.         align="left"
  132.         :width="operates.dropDown ? '50' : operates.width"
  133.         :fixed="operates.fixed"
  134.         :min-width="operates.minwidth"
  135.         :resizable="operates.resizable"
  136.         v-if="operates.list.length > 0"
  137.       >
  138.         <template slot-scope="scope">
  139.           <!-- 操作列 不折叠 全为icon-->
  140.           <div
  141.             class="operate-group"
  142.             v-if="!operates.dropDown && !operates.isText"
  143.           >
  144.             <template
  145.               v-for="item in operates.list[0] instanceof Array
  146.                 ? operates.list[scope.$index]
  147.                 : operates.list"
  148.             >
  149.               <div class="item" v-if="item.show" :key="item.id">
  150.                 <el-switch
  151.                   v-if="item.type === 'switch'"
  152.                   v-model="scope.row[item.prop]"
  153.                   active-color="#13ce66"
  154.                   @change="item.method(scope.$index, scope.row)"
  155.                 ></el-switch>
  156.                 <el-tooltip
  157.                   v-else-if="item.type === 'tooltipIcon'"
  158.                   :enterable="false"
  159.                   effect="light"
  160.                   placement="bottom"
  161.                 >
  162.                   <div slot="content">{{ item.tooltip }}</div>
  163.                   <el-button 
  164.                     type="primary" 
  165.                     plain 
  166.                     :icon="item.icon"
  167.                     size="mini" 
  168.                     :disabled="item.disabled"
  169.                     @click="item.method(scope.$index, scope.row)"
  170.                   ></el-button>
  171.                 </el-tooltip>
  172.                 <el-button 
  173.                   v-else-if="item.type === 'icon'"
  174.                   type="primary" 
  175.                   plain 
  176.                   :icon="item.icon"
  177.                   size="mini" 
  178.                   :disabled="item.disabled"
  179.                   @click="item.method(scope.$index, scope.row)"
  180.                 ></el-button>
  181.               </div>
  182.             </template>
  183.           </div>
  184.           <!-- 操作列 不折叠 全为文字-->
  185.           <div
  186.             class="operate-group"
  187.             v-if="!operates.dropDown && operates.isText"
  188.           >
  189.             <template
  190.               v-for="item in operates.list[0] instanceof Array
  191.                 ? operates.list[scope.$index]
  192.                 : operates.list"
  193.             >
  194.               <div class="item" v-if="item.show" :key="item.id">
  195.                 <el-button
  196.                   size="small"
  197.                   type="text"
  198.                   :disabled="item.disabled"
  199.                   @click.native.prevent="item.method(scope.$index, scope.row)"
  200.                   >{{ item.label }}</el-button
  201.                 >
  202.               </div>
  203.             </template>
  204.           </div>
  205.           <!-- 操作列 折叠下拉-->
  206.           <div class="operate-group" v-else-if="operates.dropDown">
  207.             <el-dropdown
  208.               @command="handleCommand"
  209.               trigger="hover"
  210.               placement="bottom-start"
  211.             >
  212.               <span class="el-dropdown-link">
  213.                 <i class="el-icon-s-unfold" style="font-size: 16px;"></i>
  214.               </span>
  215.               <!-- 根据operates.list 来渲染操作列下拉的内容 -->
  216.               <el-dropdown-menu slot="dropdown">
  217.                 <el-dropdown-item
  218.                   v-for="(item, index) in operates.list[0] instanceof Array
  219.                     ? operates.list[scope.$index]
  220.                     : operates.list"
  221.                   :disabled="item.disabled"
  222.                   :key="index"
  223.                   :command="composeValue(item, scope.row, scope.$index)"
  224.                   >{{ item.label }}</el-dropdown-item
  225.                 >
  226.               </el-dropdown-menu>
  227.             </el-dropdown>
  228.           </div>
  229.         </template>
  230.       </el-table-column>
  231.       <!--region 数据列-->
  232.       <template v-for="column in columns">
  233.         <!-- :filter-method="column.filters ? column.filterMethod : undefined" -->
  234.         <!-- v-if="
  235.             options.columnsSelect || options.columnsTreeSelect
  236.               ? checkedList.includes(column.label)
  237.               : true
  238.           " -->
  239.         <el-table-column
  240.           v-if="
  241.             options.columnsSelect || options.columnsTreeSelect
  242.               ? checkedList.includes(column.label)
  243.               : true
  244.           "
  245.           :prop="column.prop"
  246.           :key="column.label"
  247.           :label="column.label"
  248.           align="left"
  249.           :width="column.width"
  250.           :min-width="column.minwidth"
  251.           :resizable="column.resizable"
  252.           :sortable="column.sortable"
  253.           :filters="column.filters"
  254.           :filter-method="column.filters ? column.filterMethod : undefined"
  255.           :filtered-value="column.filteredValue"
  256.           :fixed="column.fixed"
  257.           :column-key="column.prop"
  258.         >
  259.           <template slot="header" slot-scope="scope"
  260.             >{{ column.label }}
  261.             <TableHeaderRender
  262.               v-if="column.filterInput"
  263.               :columnProp="column.prop"
  264.               :tableColumn="scope.column"
  265.               :defaultValue="column.defaultValue"
  266.               :inputFilteredMap="inputFilteredMap"
  267.               @filterInputMethod="filterInputMethod"
  268.               @resetChangeMethod="resetChangeMethod"
  269.             ></TableHeaderRender>
  270.           </template>
  271.           <!-- :filtered-value="column.filteredValue" -->
  272.           <template slot-scope="scope">
  273.             <!-- 如果传进来的column没有render函数执行以下代码 -->
  274.             <template v-if="!column.render">
  275.               <!-- 如果传进来的column没有render函数但有formatter函数执行以下代码 -->
  276.               <template v-if="column.formatter">
  277.                 <span v-html="column.formatter(scope.row, column)"></span>
  278.               </template>
  279.               <!-- 如果传进来的column既没有render函数也没有formatter函数执行以下代码 -->
  280.               <template v-else>
  281.                 <span>{{ scope.row[column.prop] }}</span>
  282.               </template>
  283.             </template>
  284.             <!-- 如果传进来的column有render函数执行以下代码 -->
  285.             <template v-else>
  286.               <expand-dom
  287.                 :column="column"
  288.                 :row="scope.row"
  289.                 :render="column.render"
  290.                 :index="scope.$index"
  291.               ></expand-dom>
  292.             </template>
  293.           </template>
  294.         </el-table-column>
  295.       </template>
  296.       <!--endregion-->
  297.     </el-table>
  298.   </div>
  299. </template>
  300.  
  301. <script>
  302. import TableHeaderRender from "./TableHeaderRender.vue";
  303. export default {
  304.   name: "OperateTable",
  305.   props: {
  306.     // 表格的数据源
  307.     dataSource: {
  308.       type: Array,
  309.       default: () => [],
  310.     },
  311.     // 需要展示的列
  312.     columns: {
  313.       type: Array,
  314.       default: () => [{}],
  315.     },
  316.     // table 表格的控制参数
  317.     options: {
  318.       type: Object,
  319.       default: () => {
  320.         return {
  321.           stripe: true, // 是否为斑马纹 table
  322.         };
  323.       },
  324.     },
  325.     // 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等
  326.     operates: {
  327.       type: Object,
  328.       default: () => {
  329.         return {
  330.           list: [],
  331.         };
  332.       },
  333.     },
  334.     defaultSelectedColumn: {
  335.       type: Array,
  336.       default: () => [],
  337.     },
  338.     defaultColumn: {
  339.       type: Array,
  340.       default: () => [],
  341.     },
  342.     totalColumn: {
  343.       type: Array,
  344.       default: () => [],
  345.     },
  346.     treeColumn: {
  347.       type: Array,
  348.       default: () => [],
  349.     },
  350.     defaultChecked: {
  351.       type: Array,
  352.       default: () => [],
  353.     },
  354.     defaultExpanded: {
  355.       type: Array,
  356.       default: () => [],
  357.     },
  358.     isInit: {
  359.       type: Boolean,
  360.       default: false
  361.     },
  362.     isSave: {
  363.       type: Boolean,
  364.       default: false
  365.     }
  366.   },
  367.   components: {
  368.     TableHeaderRender,
  369.     expandDom: {
  370.       functional: true,
  371.       props: {
  372.         row: Object,
  373.         render: Function,
  374.         index: Number,
  375.         column: {
  376.           type: Object,
  377.           default: null,
  378.         },
  379.       },
  380.       render: (h, ctx) => {
  381.         const params = {
  382.           row: ctx.props.row,
  383.           index: ctx.props.index,
  384.         };
  385.         if (ctx.props.column) params.column = ctx.props.column;
  386.         return ctx.props.render(h, params);
  387.       },
  388.     },
  389.   },
  390.   data() {
  391.     return {
  392.       cloumnKeyword:"",//字段关键字搜索
  393.       isIndeterminate:true,//全选状态
  394.       checkAll:false,//字段全选
  395.       checkBoxOptions: [], // 全部表头
  396.       checkedList: [], // 选中表头
  397.       count: 0, // 用于判断表格是否刚渲染
  398.       isCheckBoxSort: false, // 用于判断是否是由自定义数据列引发的排序
  399.       // 以下是之前放于vuex中用于记录状态
  400.       preCheckedList: [], // 前一次的checkbox
  401.       // 排序的状态
  402.       sort: {
  403.         prop: "",
  404.         order: "",
  405.         label: "",
  406.       },
  407.       // 筛选的状态
  408.       checkBoxFilteredMap: {},
  409.       // input 所有的筛选
  410.       inputFilteredMap: {},
  411.       // columns label及prop对应的键值对
  412.       columnsLabelMap: {}
  413.     };
  414.   },
  415.   watch: {
  416.     // 监听defaultColumn，若这个发生变化，代表传入的默认column变化，即数据表格发生了切换
  417.     defaultColumn() {
  418.       this.initColumns();
  419.     },
  420.     checkedList() {
  421.       // if(this.checkedList.length>0){
  422.       //   this.$emit("selectedColumn",this.checkedList);
  423.       // }
  424.       // 处理当点击checkbox显示的是排序列时，恢复排序列的显示
  425.       let showLabelArray = this.checkboxShowLabel();
  426.       console.log("showLabelArray", showLabelArray);
  427.       // if (value.length !== 0) {
  428.       //   value.map((item) => {
  429.       //     this.handleStatusRevert(item);
  430.       //   });
  431.       this.columns.map((column, index) => {
  432.         this.handleStatusRevert(column, index, showLabelArray);
  433.       });
  434.     },
  435.   },
  436.   created() {
  437.     this.normalizeColumnsLabelMap();
  438.   },
  439.   mounted() {
  440.     if (!this.options.columnsTreeSelect) {
  441.       this.checkedList = this.$props.defaultColumn;
  442.       this.checkBoxOptions = this.$props.totalColumn;
  443.     } else {
  444.       this.checkedList = this.$refs.tree
  445.         .getCheckedNodes()
  446.         .map((item) => item.label);
  447.     }
  448.     // 挂载时将defaultSort属性传给vuex
  449.     this.handleDefaultSort();
  450.   },
  451.   // 动态切换表头的时候闪烁是因为表头重新计算高度导致的,以下方法解决此bug
  452.   beforeUpdate() {
  453.     this.$nextTick(() => {
  454.       //在数据加载完，重新渲染表格
  455.       this.$refs["operateTable"].doLayout();
  456.     });
  457.   },
  458.   methods: {
  459.     //全选字段
  460.     handleCheckAllChange(val){
  461.       this.checkedList = val ? this.checkBoxOptions : [];
  462.       this.isIndeterminate = false;
  463.     },
  464.     //反选
  465.     handleCheckedCitiesChange(value){
  466.       let checkedCount = value.length;
  467.       this.checkAll = checkedCount === this.checkBoxOptions.length;
  468.       this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxOptions.length;
  469.     },
  470.     //初始化字段
  471.     initColumns(flag){
  472.       if(flag){
  473.         this.checkedList = this.$props.defaultSelectedColumn;
  474.       }else{
  475.         this.checkedList = this.$props.defaultColumn;
  476.       }
  477.       this.checkBoxOptions = this.$props.totalColumn;
  478.     },
  479.     // 处理判断checkbox 点击时，显示的是哪个字段名
  480.     checkboxShowLabel() {
  481.       // 判断显示的字段是哪个字段,如果是树形，可能有多个，故更改为数组接收
  482.       let value = [];
  483.       console.log("this.checkedList", this.checkedList);
  484.       if (this.count === 0) {
  485.         this.saveCheckedList(this.checkedList);
  486.         // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
  487.         this.count++;
  488.       } else {
  489.         if (this.checkedList.length > this.preCheckedList.length) {
  490.           for (let index = 0; index < this.checkedList.length; index++) {
  491.             if (!this.preCheckedList.includes(this.checkedList[index])) {
  492.               value.push(this.checkedList[index]);
  493.             }
  494.             // if (this.checkedList[index] !== this.preCheckedList[index]) {
  495.             //   value = this.checkedList[index];
  496.             // }
  497.           }
  498.         }
  499.         this.saveCheckedList(this.checkedList);
  500.         // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
  501.       }
  502.       return value;
  503.     },
  504.     // 处理sort\filterd由隐藏变为显示状态的恢复
  505.     handleStatusRevert(column, index, showLabelArray) {
  506.       let compareLabel = column.label;
  507.       if (showLabelArray.includes(compareLabel)) {
  508.         // 如果是有checkbox 筛选的字段，恢复筛选
  509.         let filteredValue =
  510.           this.checkBoxFilteredMap[this.columnsLabelMap[compareLabel]];
  511.         // 如果是有input 筛选的字段，恢复筛选
  512.         let filteredInputValue =
  513.           this.inputFilteredMap[this.columnsLabelMap[compareLabel]];
  514.         this.columns[index].filteredValue = filteredValue;
  515.         this.columns[index].defaultValue = filteredInputValue;
  516.         this.$nextTick(() => {
  517.           this.$refs.operateTable.store.states.columns.map((column) => {
  518.             if (column.filteredValue && column.filteredValue.length) {
  519.               this.$refs.operateTable.store.commit("filterChange", {
  520.                 column,
  521.                 values: column.filteredValue,
  522.                 silent: true,
  523.               });
  524.             }
  525.           });
  526.         });
  527.       } else {
  528.         this.columns[index].filteredValue = [];
  529.         this.columns[index].defaultValue = "";
  530.       }
  531.       // 如果是有排序的字段，恢复排序
  532.       if (showLabelArray.includes(this.sort.label)) {
  533.         this.$nextTick(() => {
  534.           //在数据加载完，重新渲染表格
  535.           this.isCheckBoxSort = true;
  536.           this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
  537.         });
  538.       }
  539.       /**
  540.       // 如果是有checkbox 筛选的字段，恢复筛选
  541.       let filteredValue = this.checkBoxFilteredMap[this.columnsLabelMap[value]];
  542.       // 如果是有input 筛选的字段，恢复筛选
  543.       let filteredInputValue = this.inputFilteredMap[
  544.         this.columnsLabelMap[value]
  545.       ];
  546.       for (let i = 0; i < this.columns.length; i++) {
  547.         if (this.columns[i].label === value) {
  548.           this.columns[i].filteredValue = filteredValue;
  549.           this.columns[i].defaultValue = filteredInputValue;
  550.           this.$nextTick(() => {
  551.             this.$refs.operateTable.store.states.columns.map((column) => {
  552.               if (column.filteredValue && column.filteredValue.length) {
  553.                 console.log("!11");
  554.                 this.$refs.operateTable.store.commit("filterChange", {
  555.                   column,
  556.                   values: column.filteredValue,
  557.                   silent: true,
  558.                 });
  559.               }
  560.             });
  561.           });
  562.         } else {
  563.           this.columns[i].filteredValue = [];
  564.           this.columns[i].defaultValue = "";
  565.         }
  566.       }
  567.       // for (let i = 0; i < this.columns.length; i++) {
  568.       //   if (this.columns[i].label === value) {
  569.       //     this.columns[i].defaultValue = filteredInputValue;
  570.       //   } else {
  571.       //     this.columns[i].defaultValue = "";
  572.       //   }
  573.       // }
  574.       // 如果是有排序的字段，恢复排序
  575.       if (value === this.sort.label) {
  576.         this.$nextTick(() => {
  577.           //在数据加载完，重新渲染表格
  578.           this.isCheckBoxSort = true;
  579.           this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
  580.         });
  581.       }
  582.       */
  583.     },
  584.     // 处理生成columns 的label prop键值对
  585.     normalizeColumnsLabelMap() {
  586.       this.columns.map((column) => {
  587.         this.columnsLabelMap[column.label] = column.prop;
  588.       });
  589.     },
  590.     filterInputMethod(column, inputFilteredMap) {
  591.       console.log("column, inputFilteredMap", column, inputFilteredMap);
  592.       this.inputFilteredMap = inputFilteredMap;
  593.       this.$emit("filterInputMethod", column, inputFilteredMap);
  594.     },
  595.     resetChangeMethod(tableColumn, columnProp) {
  596.       this.$emit("resetChangeMethod", tableColumn, this.inputFilteredMap);
  597.     },
  598.     cellMouseEnter(row, column, cell, event) {
  599.       this.$emit("cell-mouse-enter", row, column, cell, event);
  600.     },
  601.     cellMouseLeave(row, column, cell, event) {
  602.       this.$emit("cell-mouse-leave", row, column, cell, event);
  603.     },
  604.     cellClick(row, column, cell, event) {
  605.       this.$emit("cell-click", row, column, cell, event);
  606.     },
  607.     cellDblclick(row, column, cell, event) {
  608.       this.$emit("cell-dblclick", row, column, cell, event);
  609.     },
  610.     rowClick(row, column, event) {
  611.       this.$emit("row-click", row, column, event);
  612.     },
  613.     rowContextmenu(row, column, event) {
  614.       this.$emit("row-contextmenu", row, column, event);
  615.     },
  616.     rowDblclick(row, column, event) {
  617.       this.$emit("row-dblclick", row, column, event);
  618.     },
  619.     headerClick(column, event) {
  620.       this.$emit("header-click", column, event);
  621.     },
  622.     headerContextmenu(column, event) {
  623.       this.$emit("header-contextmenu", column, event);
  624.     },
  625.     sortChange(sortObj) {
  626.       this.changeSort(sortObj);
  627.       // this.$componentsStore.commit("table/changeSort", sortObj);
  628.       if (!this.isCheckBoxSort) {
  629.         this.$emit("sort-change", sortObj);
  630.       }
  631.       // 还原isCheckBoxSort
  632.       this.isCheckBoxSort = false;
  633.     },
  634.     handleDefaultSort() {
  635.       if (this.options.defaultSort !== undefined) {
  636.         let column = { label: "" };
  637.         // for (let index = 0; index < this.columns.length; index++) {
  638.         //   if (this.columns[index].prop === this.options.defaultSort.prop) {
  639.         //     column.label = this.columns[index].label;
  640.         //     break;
  641.         //   }
  642.         // }
  643.         column.label = this.columnsLabelMap[this.options.defaultSort.prop];
  644.         this.changeSort({
  645.           ...this.options.defaultSort,
  646.           column,
  647.         });
  648.       }
  649.     },
  650.     // 点击操作的下拉项目后触发事件
  651.     handleCommand(command) {
  652.       if (command.method) {
  653.         command.method(command.index, command.row, command.label);
  654.       }
  655.     },
  656.     // 点击dropDown传参方法
  657.     composeValue(item, row, index) {
  658.       return {
  659.         label: item.label,
  660.         row: row,
  661.         index: index,
  662.         method: item.method,
  663.       };
  664.     },
  665.     select(selection, row) {
  666.       this.$emit("select", selection, row);
  667.     },
  668.     selectAll(selection) {
  669.       this.$emit("select-all", selection);
  670.     },
  671.     checkboxSelected(selection) {
  672.       this.$emit("selection-change", selection);
  673.     },
  674.     selectable(row, index) {
  675.       let data = true;
  676.       this.$emit("selectable", row, index, (val) => {
  677.         data = val;
  678.       });
  679.       return data;
  680.     },
  681.     getRowKeys(row) {
  682.       let data;
  683.       for (let index = 0; index < this.dataSource.length; index++) {
  684.         if (row === this.dataSource[index]) {
  685.           data = index;
  686.           break;
  687.         }
  688.       }
  689.       // this.dataSource.map((item, index) => {
  690.       //   if (row === item) {
  691.       //     data = index;
  692.       //   }
  693.       // });
  694.       this.$emit("row-key", row, (val) => {
  695.         data = val;
  696.       });
  697.       return data;
  698.     },
  699.     load(tree, treeNode, resolve) {
  700.       this.$emit("load", tree, treeNode, resolve);
  701.     },
  702.     // 记录表格总的筛选状态,用于列显示隐藏时保存checkbox状态
  703.     filterChange(filters) {
  704.       let currKey = Object.keys(filters)[0];
  705.       if (filters[currKey].length === 0) {
  706.         delete this.checkBoxFilteredMap[currKey];
  707.       } else {
  708.         this.checkBoxFilteredMap[currKey] = filters[currKey];
  709.       }
  710.       this.$emit("filter-change", filters);
  711.     },
  712.     checkChange(nodeObj, checkObj) {
  713.       this.checkedList = checkObj.checkedNodes.map((item) => {
  714.         return item.label;
  715.       });
  716.     },
  717.     // 之前写在vuex里的方法
  718.     changeSort(sort) {
  719.       this.sort.prop = sort.prop;
  720.       this.sort.order = sort.order;
  721.       this.sort.label = sort.column.label;
  722.     },
  723.     saveCheckedList(preCheckedList) {
  724.       this.preCheckedList = preCheckedList;
  725.     },
  726.   },
  727. };
  728. </script>
  729.  
  730. <style>
  731.     .operateTable{
  732.         position: relative;
  733.         width: 100%;
  734.     }
  735.     .operateTable .column-dropdown{
  736.         position: absolute;
  737.         right: 0px;
  738.         top: -42px;
  739.         z-index: 99;
  740.     }
  741.     .caoz_ft_warp{
  742.       text-align: center;
  743.     }
  744.     .caoz_ft_warp .el-input.is-active .el-input__inner, .caoz_ft_warp .el-input__inner:focus{
  745.         border-color: #9A4B9B;
  746.         outline: 0;
  747.     }
  748.     .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  749.         background-color: #9a4b9b;
  750.         border-color: #9a4b9b;
  751.     }
  752.     .el-checkbox__inner:hover {
  753.         border-color: #9A4B9B;
  754.     }
  755.     .el-checkbox__input.is-focus .el-checkbox__inner{
  756.         border-color: #9A4B9B;
  757.     }
  758.     .el-checkbox__input.is-checked+.el-checkbox__label {
  759.         color: #9A4B9B;
  760.     }
  761.     .checkboxScorll .el-checkbox__input.is-checked + .el-checkbox__label {
  762.         color: #666;
  763.     }
  764.     .column-dropdown .el-button{margin-right: 0 !important;min-width:0;}
  765.     .column-dropdown .el-button:focus, .el-button:hover{
  766.         color: #9A4B9B;
  767.         border-color: #e1c9e1;
  768.         background-color: #f5edf5;
  769.     }
  770.     .checkboxScorll {
  771.         max-height: 300px;
  772.         overflow-y: auto;
  773.     }
  774.     .checkboxScorll .checkbox {
  775.         display: block;
  776.         margin-top: 10px;
  777.         padding-left: 20px;
  778.     }
  779. </style>

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

  1. <template>
  2.   <div class="tableView">
  3.     <div class="content">
  4.       <operateTable
  5.         v-loading="loading"
  6.         :dataSource="operateTableData"
  7.         :columns="operateTableColumns"
  8.         :options="operateTableOption"
  9.         :defaultColumn="defaultColumns"
  10.         :totalColumn="totalColumns"
  11.         :defaultSelectedColumn="defaultSelectedColumn"
  12.         @sort-change="sortChange"
  13.         @saveSettingColumns="saveSettingColumns"
  14.       ></operateTable>
  15.     </div>
  16.   </div>
  17. </template>
  18.  
  19. <script>
  20. import operateTable from "./components/operateTable.vue";
  21. export default {
  22.   name: "",
  23.   components: {
  24.     operateTable,
  25.   },
  26.   data() {
  27.     return {
  28.       loading: false,
  29.       operateTableData: [
  30.         {
  31.           date: "2016-05-02",
  32.           name: "王小虎",
  33.           address: "上海市普陀区金沙江路 1518 弄",
  34.         },
  35.         {
  36.           date: "2016-05-04",
  37.           name: "王小虎",
  38.           address: "上海市普陀区金沙江路 1517 弄",
  39.         },
  40.         {
  41.           date: "2016-05-01",
  42.           name: "王小虎",
  43.           address: "上海市普陀区金沙江路 1519 弄",
  44.         },
  45.         {
  46.           date: "2016-05-03",
  47.           name: "王小虎",
  48.           address: "上海市普陀区金沙江路 1516 弄",
  49.         },
  50.       ],
  51.       operateTableColumns: [
  52.         {
  53.           prop: "action",
  54.           label: "操作",
  55.           width: 100,
  56.           fixed: true,
  57.           render: (h, params) => {
  58.             return h(
  59.               "div",
  60.               {
  61.                 class: "operate-group",
  62.               },
  63.               [
  64.                 h(
  65.                   "el-tooltip",
  66.                   {
  67.                     props: {
  68.                       content: "处理",
  69.                       placement: "bottom",
  70.                       enterable: false,
  71.                       effect: "light",
  72.                     },
  73.                     class: "item",
  74.                   },
  75.                   [
  76.                     h("i", {
  77.                       props: {},
  78.                       class: "el-icon-edit",
  79.                       on: {
  80.                         click: () => {
  81.                           console.log(params.row);
  82.                         },
  83.                       },
  84.                     }),
  85.                   ]
  86.                 ),
  87.               ]
  88.             );
  89.           },
  90.         },
  91.         {
  92.           prop: "date",
  93.           label: "日期",
  94.           minwidth: 150,
  95.           sortable: "custom",
  96.         },
  97.         {
  98.           prop: "name",
  99.           label: "姓名",
  100.           minwidth: 150,
  101.           sortable: "custom",
  102.         },
  103.         {
  104.           prop: "address",
  105.           label: "地址",
  106.           minwidth: 150,
  107.           sortable: "custom",
  108.         },
  109.       ],
  110.       operateTableOption: {
  111.         stripe: true, // 是否为斑马纹 table
  112.         highlightCurrentRow: true, // 是否要高亮当前行
  113.         columnsSelect: true,
  114.         maxHeight: 300,
  115.       },
  116.       defaultColumns: ["操作", "日期", "姓名", "地址"],
  117.       totalColumns: ["操作", "日期", "姓名", "地址"],
  118.       //所有用户默认勾选的列  用于初始化
  119.       defaultSelectedColumn: [],
  120.     };
  121.   },
  122.   methods: {
  123.     //表头排序
  124.     sortChange(column, prop, order) {
  125.       if (column.order === "ascending") {
  126.         this.orderfield = column.prop;
  127.         this.orderby = "ASC";
  128.       } else if (column.order === "descending") {
  129.         this.orderfield = column.prop;
  130.         this.orderby = "DESC";
  131.       } else {
  132.         this.orderfield = "";
  133.         this.orderby = "";
  134.       }
  135.       //   this.getTabldHandle();
  136.     },
  137.     //保存自定义字段
  138.     saveSettingColumns(data) {
  139.       console.log(data);
  140.     },
  141.   },
  142.   mounted() {},
  143. };
  144. </script>
  145.  
  146. <style>
  147. .tableView {
  148.   width: 100%;
  149.   height: 100%;
  150. }
  151. .content {
  152.   padding: 60px;
  153. }
  154. .disableIcon {
  155.   color: #c0c4cc;
  156.   cursor: not-allowed;
  157. }
  158. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/353368
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号