目前avue提供的列显隐并没有保存的功能,也没有提供相应的插槽等一些自定义修改方法,所以想要实现该功能需要写一个自定义组件并插入在avue crud组件中。
原理改变option中column中字段顺序来控制列的顺序,通过hide属性实现显隐。
第一步
在对应的右边按钮插槽位置放一个自定义组件
<template slot="menuRight"> <showHidden :column.sync="option.column" :moduleType="102" > </showHidden> </template>
第二步
准备相应的数据,avue文档中没有写的属性,通过看源码可以知道order 和searchOrder的作用。
{ order:19,//form表单排序 searchOrder:19,//搜索表单排序 showColumn:true,//参与自定义列显隐 label: '项目名称', prop: 'projectId', required: true, rules: [ { required: true, message: '请选择项目名称' } ] },
第三步
写自定义列组件
<template> <span class="showHidden20210901"> <el-tooltip class="item" effect="dark" content="显隐" placement="top"> <el-button size="small" icon="el-icon-s-operation" circle @click="openDrawer" > </el-button> </el-tooltip> <el-drawer id="showHidden20210901drawer" :visible.sync="showDrawer" append-to-body size="50%" :before-close="handleClose"> <template slot="title"> <div> <div> 自定义显示列 </div> </div> </template> <div class="flex-box"> <div style="flex-shrink: 1; flex-grow: 1;overflow: hidden;"> <el-divider></el-divider> <el-transfer filterable :titles="titles" :filter-method="filterMethod" filter-placeholder="请输入搜索内容" v-model="value" @change="showColumnChange" :data="transferData"> </el-transfer> </div> <div class="footer"> <el-button type="primary" @click="saveOption" style="margin-right:15px;padding:12px 35px;">保 存</el-button> <el-button type="primary" @click="tableInitializeConfig">恢复默认</el-button> </div> </div> </el-drawer> </span> </template> <script> import {tableSubmitConfig,tableInitializeConfig,getPersonalConfig} from "@/api/wel/home.js"; export default { props:{ // 表格列配置 column:{ type:Array, default:() => { return []; }, }, // 类型 moduleType:{ type:Number, default:0, } }, data(){ return{ titles:['隐藏',"显示"], showDrawer:false, transferData:[], value: [], } }, created(){
//数组去除空元素方法,下面排序的时候会用到 Array.prototype.removeEmptyEle = function(arr){ for(var i = 0; i < arr.length; i++) { if(arr[i] == undefined || arr[i] == "" || arr[i] == null) { arr.splice(i,1); i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置,删除空之后,后面的元素要向前补位, // 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试,然后思考其中逻辑 } } return arr; }; // 获取配置 并修改列表设置 getPersonalConfig({moduleType:this.moduleType}).then(res=>{ let configColumn = res.data.personalConfig.split(","); let topColumn = []; let downColumn = []; this.column.forEach(ele=>{ if(ele.showColumn){ let columnIndex = configColumn.indexOf(ele.prop); if(columnIndex>-1){ ele.hide = false; topColumn[columnIndex] = ele; }else{ ele.hide = true; downColumn.push(ele); } } }); topColumn = topColumn.removeEmptyEle(topColumn); let allColumn = topColumn.concat(downColumn); this.column = allColumn; this.$emit('update:column',allColumn);//给表格更新 this.generateData(); }) }, methods:{ // 显示 右侧的内容发生变化的时候 showColumnChange(e){ console.log(e) let downData = []; let topData = []; this.transferData.forEach(ele=>{ if(this.value.indexOf(ele.key)>-1){ topData.push(ele); }else{ downData.push(ele); } }) let allData = topData.concat(downData); console.log(allData) setTimeout(()=>{ this.transferData = allData; },0) }, // 处理可选择数据 generateData(){ const data = [];//全部数据 let value = [];//显示的数据 this.column.forEach(ele=>{ if(ele.showColumn){//参与选择显示的字段 data.push({ label: ele.label, key: ele.prop, pinyin: ele.prop, }); if(!ele.hide){ value.push(ele.prop) } } }) this.transferData = data; this.value = value; }, // 恢复默认配置 tableInitializeConfig(){ tableInitializeConfig({moduleType:this.moduleType}).then(res=>{ if(res.success){ let configColumn = res.data.split(",");//显示的数据 let value = []; let topData = []; let downData = []; let toptransferData = []; let downtransferData = []; let column = JSON.parse(JSON.stringify(this.column)); column.forEach(ele=>{ if(ele.showColumn){ let temObj = { label: ele.label, key: ele.prop, pinyin: ele.prop, }; let index = configColumn.indexOf(ele.prop); if(index >-1 ){ toptransferData[index] = temObj; value[index] = ele.prop; ele.hide = false; topData[index] = ele; }else{ downtransferData.push(temObj); ele.hide = true; downData.push(ele); } } }) topData = topData.removeEmptyEle(topData); let allData = topData.concat(downData); let allTransferData = toptransferData.concat(downtransferData); setTimeout(()=>{ this.transferData = allTransferData; this.value = value;//显示的列 console.log(value) this.$emit('update:column',allData);//给表格更新 },0) this.$message({ message: '操作成功!', type: 'success' }); } }) }, // 保存设置 saveOption(){ let topData = []; let downData = []; let column = JSON.parse(JSON.stringify(this.column)) column.forEach(ele=>{ let index = this.value.indexOf(ele.prop); if(index >-1 ){ ele.hide = false; topData[index] = ele; }else{ ele.hide = true; downData.push(ele); } }) topData = topData.removeEmptyEle(topData); let allData = topData.concat(downData); let personalConfig = this.value.join(','); tableSubmitConfig({moduleType:this.moduleType,personalConfig:personalConfig}).then(res=>{ if(res.success){ this.$emit('update:column',allData); this.$message({ message: '操作成功!', type: 'success' }); } }) }, // 关闭弹窗 handleClose(){ this.showDrawer = false; }, // 打开弹窗 openDrawer(){ this.generateData(); this.showDrawer = true; }, // 模糊搜索 filterMethod(query, item) { return item.label.indexOf(query) > -1; } } } </script> <style lang="scss" > .showHidden20210901{ } #showHidden20210901drawer{ .el-drawer__header{ margin-bottom: 0px ; } .el-transfer__buttons{ display: flex; flex-direction: column; justify-content: center; } .el-button{ margin-left: 0; } .el-transfer-panel{ width: 50%; } .el-transfer-panel__body{ height: calc(100vh - 300px); } .el-transfer-panel__list.is-filterable{ height: calc(100vh - 400px); } // .avue-crud__dialog .el-transfer-panel__body, .avue-crud__dialog .el-transfer-panel__list.is-filterable{ // height: 100%; // } // .el-transfer-panel__list.is-filterable .el-transfer{ position: relative; padding: 0 20px; height: calc(100vh - 300px); } .footer{ display: flex; justify-content: center; flex-shrink: 0; flex-grow: 0; height: 200px; margin-top: 30px; align-items: center; // border: 1px solid #f00; } .flex-box{ // height: 100%; display: flex; flex-direction: column; justify-content: space-between; } } </style>