目前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>