avue实现自定义列显隐并保存，并且搜索表单、form表单、crud列顺序互不影响。

avue实现⾃定义列显隐并保存，并且搜索表单、form表单、
crud列顺序互不影响。

⽬前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: bel,
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: bel,
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 bel.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>。