功能说明:
- 页面自定义设置列表需要选择的列,设置组件集成的两种方法,一个是在列表外增加设置组件,一个是在列表表头增加设置组件
- 具体代码案例参照【常用示例-单表模型示例】功能
功能预览:
实现方法:
一. 增加初始化配置
- data() 方法中配置
//表头
columns:[],
//列设置
settingColumns:[],
//列定义
defColumns: [{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: "center",
customRender: function (t, r, index) {
return parseInt(index) + 1;
}
},
{
title: '姓名',
align: "center",
dataIndex: 'name'
},
.......
.......
]
说明:
columns:列表展示的列,初始为空。
settingColumns:保存勾选的列设置
defColumns:定义列表可以展示的列信息
- 增加设置按钮,两种实现方式任选其一即可
(一)第一种在列表外增加设置按钮
<span style="float:right;">
<a @click="loadData()"><a-icon type="sync" />刷新</a>
<a-divider type="vertical" />
<a-popover title="自定义列" trigger="click" placement="leftBottom">
<template slot="content">
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</template>
<a><a-icon type="setting" />设置</a>
</a-popover>
</span>
(二)
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
customRender: 'action'},
}
< a-table > </ a-table > 中增加插槽代码
<div slot="filterDropdown">
<a-card>
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</a-card>
</div>
<a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color: '#108ee9' }" />
在这里插入代码片
- 实现checkbox @change
//列设置更改事件
onColSettingsChange (checkedValues) {
var key = this.$route.name+":colsettings";
Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
this.settingColumns = checkedValues;
const cols = this.defColumns.filter(item => {
if(item.key =='rowIndex'|| item.dataIndex=='action'){
return true
}
if (this.settingColumns.includes(item.dataIndex)) {
return true
}
return false
})
this.columns = cols;
},
- 页面加载时实现列的初始化方法
initColumns(){
//权限过滤(列权限控制时打开,修改第二个参数为授权码前缀)
//this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
var key = this.$route.name+":colsettings";
let colSettings= Vue.ls.get(key);
if(colSettings==null||colSettings==undefined){
let allSettingColumns = [];
this.defColumns.forEach(function (item,i,array ) {
allSettingColumns.push(item.dataIndex);
})
this.settingColumns = allSettingColumns;
this.columns = this.defColumns;
}else{
this.settingColumns = colSettings;
const cols = this.defColumns.filter(item => {
if(item.key =='rowIndex'|| item.dataIndex=='action'){
return true;
}
if (colSettings.includes(item.dataIndex)) {
return true;
}
return false;
})
this.columns = cols;
}
}
- created中调用:
created() {
this.initColumns();
},
注意事项:
引入注意事项
- 需要引入vue
import Vue from 'vue'
- 增加设时按钮的第一种方式
<span style="float:right;">
<a @click="loadData()"><a-icon type="sync" />刷新</a>
<a-divider type="vertical" />
<a-popover title="自定义列" trigger="click" placement="leftBottom">
<template slot="content">
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</template>
<a><a-icon type="setting" />设置</a>
</a-popover>
</span>
- 增加设时按钮的第二种方式
<div slot="filterDropdown">
<a-card>
<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
<a-row>
<template v-for="(item,index) in defColumns">
<template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
<a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</a-card>
</div>
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
customRender: 'action'},
}