devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI实现el-table列的显示与隐藏和列拖拽(RuoYi分离版)_el-table right-toolbar

作者：我家自动化 | 2024-04-14 04:34:20

赞

踩

el-table right-toolbar

显示隐藏步骤思路：

一、table要实现v-for循环添加列的操作

二、给列添加v-if属性 方法返回当前列是否显示隐藏

①在RightToolBar添加列显示隐藏的图标控件                                                                                    

  1. <template>
  2.   <div class="top-right-btn">
  3.     <el-row>
  4.       <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
  5.         <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
  6.       </el-tooltip>
  7.       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
  8.         <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
  9.       </el-tooltip>
  10.  
  11.       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns!=undefined">
  12.         <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px">
  13.           <el-button size="mini" circle icon="el-icon-menu"/>
  14.           <el-dropdown-menu slot="dropdown">
  15.             <template v-for="item in columns">
  16.               <el-dropdown-item><el-checkbox :checked="item.isShow" @change="monitorChange($event,item.label)" :label="item.label"></el-checkbox></el-dropdown-item>
  17.             </template>
  18.           </el-dropdown-menu>
  19.         </el-dropdown>
  20.       </el-tooltip>
  21.  
  22.     </el-row>
  23.     <el-dialog :title="title" :visible.sync="open" append-to-body>
  24.       <el-transfer
  25.         :titles="['显示', '隐藏']"
  26.         v-model="value"
  27.         :data="columns"
  28.         @change="dataChange"
  29.       ></el-transfer>
  30.     </el-dialog>
  31.   </div>
  32. </template>
  33. <script>
  34. export default {
  35.   name: "RightToolbar",
  36.   data() {
  37.     return {
  38.       // 显隐数据
  39.       value: [],
  40.       // 弹出层标题
  41.       title: "显示/隐藏",
  42.       // 是否显示弹出层
  43.       open: false,
  44.     };
  45.   },
  46.   props: {
  47.     showSearch: {
  48.       type: Boolean,
  49.       default: true,
  50.     },
  51.     columns: {
  52.       type: Array,
  53.     },
  54.   },
  55.   created() {
  56.   },
  57.   methods: {
  58.     // 搜索
  59.     toggleSearch() {
  60.       this.$emit("update:showSearch", !this.showSearch);
  61.     },
  62.     // 刷新
  63.     refresh() {
  64.       this.$emit("queryTable");
  65.     },
  66.     // 右侧列表元素变化
  67.     dataChange(data) {
  68.       for (var item in this.columns) {
  69.         const key = this.columns[item].key;
  70.         this.columns[item].visible = !data.includes(key);
  71.       }
  72.     },
  73.     monitorChange(event,label){
  74.       this.columns.filter(item=>item.label==label)[0].isShow=event
  75.     }
  76.   },
  77. };
  78. </script>
  79. <style lang="scss" scoped>
  80. ::v-deep .el-transfer__button {
  81.   border-radius: 50%;
  82.   padding: 12px;
  83.   display: block;
  84.   margin-left: 0px;
  85. }
  86. ::v-deep .el-transfer__button:first-child {
  87.   margin-bottom: 10px;
  88. }
  89. </style>

 下列菜单用的是checkBox组 成品效果就是这样的

                                ​​​​​​​        ​​​​​​​        ​​​​​​​        

具体两个父子控件怎么传递数据，这里不过多讲解。

下面是表格的主要代码

  1. <right-toolbar
  2.         :showSearch.sync="showSearch"
  3.         :columns="allTableLabel"
  4.         @queryTable="getList"
  5.       ></right-toolbar>
  6.     </el-row>
  7.  
  8.     <el-table
  9.       v-loading="loading"
  10.       :data="purchaseList"
  11.       row-key="id"
  12.       border
  13.       ref="purchaseTable"
  14.       @selection-change="handleSelectionChange"
  15.     >
  16.  
  17.  
  18.       <template
  19.         v-for="column in tableColumns">
  20.         <el-table-column
  21.           v-if="judgeIsShow(column.label)"
  22.           :key="column.id"
  23.           :prop="column.prop"
  24.           :class-name="column.isDrag"
  25.           :label="column.label"
  26.           :align="column.align"
  27.           :type="column.type"
  28.           :width="column.width"
  29.         >
  30.                   <template v-if="column.scope=='scope'" scope="scope">
  31.                     <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
  32.                   </template>
  33.                   <template v-else-if="column.scope=='slot-scope'" slot-scope="scope">
  34.                     {{scope.row.contractNum}}/{{getUnit(scope.row.quantityUnit)}}
  35.                   </template>
  36.                   <template v-else-if="column.scope=='ClientTag'" slot-scope="scope">
  37.                     <ClientTag :value="scope.row.contractId" :flag="flag" :view="table"/>
  38.                   </template>
  39.  
  40.  
  41.         </el-table-column>
  42.       </template>
  43.       </el-table>

下边的定义的数据和方法的代码

  1. //elementui测试
  2.       tableColumns:[
  3.         {id:"0",type:"selection",width:"55",align:"center"},
  4.         {id:"1",type:"index",label:"序号",align:"center",scope:"scope"},
  5.         {id:"2",label:"采购合同号",prop:"contractNo",align:"center",isDrag:"drag"},
  6.         {id:"3",label:"原产国",prop:"countryName",align:"center",isDrag:"drag"},
  7.         {id:"4",label:"产品",prop:"productName",align:"center",isDrag:"drag",scope:"ClientTag"},
  8.         {id:"5",label:"合同总数量",prop:"contractNum,quantityUnit",isDrag:"drag",align:"center",scope: "slot-scope"},
  9.         {id:"6",label:"合同总金额",prop:"contractPrice",align:"center"},
  10.       ],
  11.  
  12.  //elementui的table所有的表头数据
  13.       allTableLabel:[],
  14.  
  15.  
  16. //把列的显示和隐藏 存Cookie
  17. setTableShowToCookie(){
  18.       let label="";
  19.       let isShow="";
  20.  
  21.       let labelArr=[];
  22.       let isShowArr=[];
  23.  
  24.       this.allTableLabel.forEach((item)=>{
  25.         labelArr.push(item.label)
  26.         isShowArr.push(item.isShow);
  27.       })
  28.       label=labelArr.join(',')
  29.       isShow=isShowArr.join(',')
  30.       Cookies.set("purchaseTableLabel",label)
  31.       Cookies.set("purchaseTableIsShow",isShow)
  32.     },
  33.     getTableShowOfCookie(){
  34.       let label=Cookies.get("purchaseTableLabel");
  35.       let isShow=Cookies.get("purchaseTableIsShow");
  36.       console.log(label)
  37.       if (label==undefined){
  38.         this.allTableLabel=[
  39.           {label:"序号",isShow:true},
  40.           {label:"采购合同号",isShow:true},
  41.           {label:"原产国",isShow:true},
  42.           {label:"产品",isShow:true},
  43.           {label:"合同总数量",isShow:true},
  44.           {label:"合同总金额",isShow:true},
  45.         ];
  46.       }else{
  47.         let labelArr=label.split(",");
  48.         let isShowArr=isShow.split(",");
  49.         let len=labelArr.length;
  50.         console.log("长度为"+len)
  51.         for (let i=0;i<len;i++){
  52.           this.allTableLabel.push({label:labelArr[i],isShow:isShowArr[i]=="true"?true:false});
  53.         }
  54.       }
  55.     },
  56.  
  57.  
  58. //判断是否显示列
  59.     judgeIsShow(column){
  60.       let exist=this.allTableLabel.filter(item=> item.label==column);
  61.       let isShow;
  62.       if (exist.length==0){
  63.         isShow=true
  64.       }else{
  65.         isShow= exist[0].isShow;
  66.       }
  67.       return isShow;
  68.     },

 主要逻辑就是通过改变checkBox的选中和取消同步列的显示和隐藏  这个地方是根据两个数组中的label属性进行判断的  两者的label的值要保持一致。

效果图如下:

列拖拽的步骤思路：

        一、要借助第三方插件Sortable.js

        二、主要是改变table遍历的列的顺序

  1. <el-table
  2.       v-loading="loading"
  3.       :data="purchaseList"
  4.       row-key="id"
  5.       border
  6.       ref="purchaseTable"
  7.       @selection-change="handleSelectionChange"
  8.     >
  9.  
  10.  
  11.       <template
  12.         v-for="column in tableColumns">
  13.         <el-table-column
  14.           v-if="judgeIsShow(column.label)"
  15.           :key="column.id"
  16.           :prop="column.prop"
  17.           :class-name="column.isDrag"
  18.           :label="column.label"
  19.           :align="column.align"
  20.           :type="column.type"
  21.           :width="column.width"
  22.         >
  23.                   <template v-if="column.scope=='scope'" scope="scope">
  24.                     <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
  25.                   </template>
  26.                   <template v-else-if="column.scope=='slot-scope'" slot-scope="scope">
  27.                     {{scope.row.contractNum}}/{{getUnit(scope.row.quantityUnit)}}
  28.                   </template>
  29.                   <template v-else-if="column.scope=='ClientTag'" slot-scope="scope">
  30.                     <ClientTag :value="scope.row.contractId" :flag="flag" :view="table"/>
  31.                   </template>
  32.  
  33.  
  34.         </el-table-column>
  35.       </template>
  36.       </el-table>
  37.  
  38. import Sortable from "sortablejs";
  39. import draggable from "vuedraggable";
  40. export default {
  41.   name: "Purchase",
  42.   components: {
  43.     draggable,
  44.     Sortable,
  45.   },
  46.  
  47.  data() {
  48.     return {
  49.  
  50.       table:"productTable",
  51.       flag:"contractProducts",
  52.       //elementui测试
  53.       tableColumns:[
  54.         {id:"0",type:"selection",width:"55",align:"center"},
  55.         {id:"1",type:"index",label:"序号",align:"center",scope:"scope"},
  56.         {id:"2",label:"采购合同号",prop:"contractNo",align:"center",isDrag:"drag"},
  57.         {id:"3",label:"原产国",prop:"countryName",align:"center",isDrag:"drag"},
  58.         {id:"4",label:"产品",prop:"productName",align:"center",isDrag:"drag",scope:"ClientTag"},
  59.         {id:"5",label:"合同总数量",prop:"contractNum,quantityUnit",isDrag:"drag",align:"center",scope: "slot-scope"},
  60.         {id:"6",label:"合同总金额",prop:"contractPrice",align:"center"},
  61.       ],
  62.  
  63. //elementui的table所有的表头数据
  64.       allTableLabel:[],
  65.  
  66. mounted() {
  67.     this.columnDrop();
  68.   },
  69.  
  70. methods: {
  71.  
  72.     //列拖拽
  73.     columnDrop(){
  74.       //const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  75.       const wrapperTr = this.$refs.purchaseTable.$el.querySelector('.el-table__header-wrapper tr');
  76.       const that=this;
  77.       this.sortable = Sortable.create(wrapperTr, {
  78.         animation: 180,
  79.         delay: 30,
  80.         draggable:".drag",
  81.         onEnd: evt => {
  82.           if (this.tableColumns[evt.newIndex].isDrag!=undefined) {
  83.  
  84.  
  85.             const oldItem = this.tableColumns[evt.oldIndex]
  86.             this.tableColumns.splice(evt.oldIndex, 1);
  87.             this.tableColumns.splice(evt.newIndex, 0, oldItem)
  88.  
  89.             //改变两个列的id属性之后  表格的数据才进行跟新
  90.             this.tableColumns[evt.oldIndex].id=parseTime(new Date(), "{y}{m}{d}{h}{i}{s}")+"1"    
  91.             this.tableColumns[evt.newIndex].id=parseTime(new Date(), "{y}{m}{d}{h}{i}{s}")+"2"       
  92.       }else{
  93.  
  94.           }
  95.         },
  96.       });
  97.     },
  98. }
  99.

 效果图如下显示：

到此为止分别引用的时候是没问题的。

但是两者整合的时候有BUG

主要原因是因为拖拽的是显示的列，而重排的是全部的列，同时evt.oldIndex和evt.newIndex是显示列拖拽的column的index  这个地方用splice方法重排所有的column的index  排序的时候就出现乱排、不排的现象。

解决思路：

获得拖拽列的两个列的label  然后遍历全部的列  要是label相等的就返回全部列其中两个相等label列的下标  然后重排这两个列就行。

具体代码优化如下：

  1. //列拖拽
  2.     columnDrop(){
  3.       //const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  4.       const wrapperTr = this.$refs.purchaseTable.$el.querySelector('.el-table__header-wrapper tr');
  5.       const tableColumn=this.$refs.purchaseTable.columns;
  6.       let oldLabel;
  7.       let newLabel;
  8.       let oldIndex;
  9.       let newIndex;
  10.       let count=0;
  11.       const that=this;
  12.       this.sortable = Sortable.create(wrapperTr, {
  13.         animation: 180,
  14.         delay: 30,
  15.         draggable:".drag",
  16.         onEnd: evt => {
  17.           if (this.tableColumns[evt.newIndex].isDrag!=undefined) {
  18.  
  19.             oldLabel=this.$refs.purchaseTable.columns[evt.oldIndex].label;
  20.             newLabel=this.$refs.purchaseTable.columns[evt.newIndex].label;
  21.  
  22.             for (let i=0;i<that.tableColumns.length;i++){
  23.               if (that.tableColumns[i].label!=undefined&&that.tableColumns[i].label==newLabel)
  24.                 newIndex=i;
  25.  
  26.               };
  27.  
  28.               for (let i=0;i<that.tableColumns.length;i++){
  29.                 if (that.tableColumns[i].label!=undefined&&that.tableColumns[i].label==oldLabel)
  30.                   oldIndex=i;
  31.               }
  32.  
  33.             const oldItem = this.tableColumns[oldIndex]
  34.             this.tableColumns.splice(oldIndex, 1);
  35.             this.tableColumns.splice(newIndex, 0, oldItem)
  36.  
  37.             this.tableColumns.forEach((item)=>{
  38.               if(item.label==newLabel||item.label==oldLabel){
  39.                 item.id=parseTime(new Date(), "{y}{m}{d}{h}{i}{s}") + (++count)
  40.                 console.log(item.label)
  41.               }
  42.             })
  43.       }else{
  44.  
  45.           }
  46.         },
  47.       });
  48.     },

整体效果图如下：

 

以上代码只是粘贴了主要部分，有什么好的方法欢迎交流

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

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

  

闽ICP备14008679号