avue实现⾃定义列显隐并保存，并且搜索表单、form表单、
crud列顺序互不影响。
⽬前avue提供的列显隐并没有保存的功能，也没有提供相应的插槽等⼀些⾃定义修改⽅法，所以想要实现该功能需要写⼀个⾃定义组件并插⼊在avue crud组件中。
原理改变option中column中字段顺序来控制列的顺序，通过hide属性实现显隐。
第⼀步
在对应的右边按钮插槽位置放⼀个⾃定义组件
<template slot="menuRight">
<showHidden :column.sync="lumn" :moduleType="102" >
</showHidden>
</template>
第⼆步
准备相应的数据，avue⽂档中没有写的属性，通过看源码可以知道order 和archOrder的作⽤。
{
order:19,//form表单排序
archOrder:19,//搜索表单排序
showColumn:true,//参与⾃定义列显隐
frisianlabel: '项⽬名称',
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-clo="handleClo">
<template slot="title">
<div>
<div>
⾃定义显⽰列
</div>
</div>
</template>
<div class="flex-box">
<div >
<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" >保存</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:{
cisatype:Array,
default:() => {
return [];
},
},
/
/ 类型
moduleType:{
type:Number,
default:0,
}
},
data(){
return{
titles:['隐藏',"显⽰"],
showDrawer:fal,
transferData:[],
value: [],
}
},
created(){
//数组去除空元素⽅法，下⾯排序的时候会⽤到
veEmptyEle = function(arr){
fbi是什么
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({duleType}).then(res=>{
let configColumn = res.data.personalConfig.split(",");
let topColumn = [];
let downColumn = [];
if(ele.showColumn){
let columnIndex = configColumn.indexOf(ele.prop);
if(columnIndex>-1){
ele.hide = fal;
topColumn[columnIndex] = ele;
}el{
ele.hide = true;
downColumn.push(ele);
}
}
});
topColumn = veEmptyEle(topColumn);
let allColumn = at(downColumn);
this.$emit('update:column',allColumn);//给表格更新
})
},
methods:{
昆明职业技能培训
marble// 显⽰右侧的内容发⽣变化的时候
showColumnChange(e){
console.log(e)
let downData = [];
let topData = [];
can u ansferData.forEach(ele=>{
if(this.value.indexOf(ele.key)>-1){
topData.push(ele);
}el{
downData.push(ele);
穿越火线的英文名}
})
let allData = at(downData);
console.log(allData)
tTimeout(()=>{
},0)
},
// 处理可选择数据
generateData(){
const data = [];//全部数据
let value = [];//显⽰的数据
if(ele.showColumn){//参与选择显⽰的字段
walkman怎么读data.push({
label: ele.label,
key: ele.prop,
pinyin: ele.prop,
});
if(!ele.hide){
value.push(ele.prop)
}
pogo是什么意思}
})
this.value = value;
},
// 恢复默认配置
tableInitializeConfig(){
tableInitializeConfig({duleType}).then(res=>{
if(res.success){
let configColumn = res.data.split(",");//显⽰的数据
let value = [];
let topData = [];
let downData = [];
let toptransferData = [];
let downtransferData = [];
let column = JSON.par(JSON.lumn));
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 = fal;
topData[index] = ele;
}el{
downtransferData.push(temObj);
ele.hide = true;
downData.push(ele);
}
}
})
topData = veEmptyEle(topData);
let allData = at(downData);
let allTransferData = at(downtransferData);
tTimeout(()=>{
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.par(JSON.lumn))
英文报价
column.forEach(ele=>{
let index = this.value.indexOf(ele.prop);
if(index >-1 ){
ele.hide = fal;
topData[index] = ele;
}el{
ele.hide = true;
downData.push(ele);
}
})
topData = veEmptyEle(topData);
let allData = at(downData);
let personalConfig = this.value.join(',');
tableSubmitConfig({duleType,personalConfig:personalConfig}).then(res=>{ if(res.success){
this.$emit('update:column',allData);
this.$message({
message: '操作成功!',
type: 'success'
});
}
})
},
// 关闭弹窗
handleClo(){
this.showDrawer = fal;
},
/
/ 打开弹窗
openDrawer(){
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>
