列表自定义列实现
功能预览:
实现方法:
一、初始化设置
- 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:定义列表可以展示的列信息
- 增加设置按钮
在列表外增加设置按钮,:overlayStyle="{width:‘50%’}" 控制弹出框宽度
<a-popover title="自定义列" trigger="click" placement="leftBottom" :overlayStyle="{width:'50%'}" >
<template slot="content" class="popoverWidth">
<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="8"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col>
</template>
</template>
</a-row>
</a-checkbox-group>
</template>
<a class="floatRight"><a-icon type="setting" /> 自定义列</a>
</a-popover>
- methods中的方法
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;
}
},
//列设置更改事件
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;
},
- created中调用:
created() {
this.initColumns();
},
- css样式,控制位置
/** 表格自定义列靠右样式 */
.floatRight{
float: right;
}