Jeecgboot自定义列使用
直接将代码copy到相应页面即可
标签添加如下
<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" :key="index">
<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>
data生命周期定义变量
columns: [],
settingColumns: [],
defColumns: columns,
created声明周期调用
created() {
this.initColumns()
},
methods方法定义
onColSettingsChange (checkedValues) {
var key = this.$route.name + ':colsettings'
this.$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 = this.$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
}
}