效果图:
相关定义:
ckValues: [], //checkgroup设置值
chkAll: true, //全选
indeterminate: false, //模糊状态
poped: false //弹窗显示
columns: [], //显示列
columnList: [], //全部列
数据准备:
postAction('/data.meta/metaSet/queryPage', p).then(res => {
if (res.success) {
this.columnList = res.result.columnList
this.columnList.forEach(col => {
col.value = col.dataIndex //设置value值,用于checkedgroup
})
if (this.ckValues.length == 0) {
this.createChGroupValue() //初始全部选中
}
this.createColumns() //生成显示列
this.setDelCol() //设置删除标记列的显示样式
let primaryKey = this.columns.find(f => f.primaryKey == true)
if (primaryKey) {
this.primaryKey = primaryKey.dataIndex
}
this.dataSource = res.result.pageRecords.records
if (res.result.pageRecords.total) {
this.ipagination.total = res.result.pageRecords.total
}
} else {
this.$message.error(res.message)
}
}).finally(() => {
this.loading = false
})
弹窗及列选择控制方法:
createChGroupValue() {
this.ckValues = []
this.columnList.forEach(col => {
this.ckValues.push(col.value)
})
},
ckChange(checkedList) {
this.indeterminate = !!checkedList.length && checkedList.length < this.columnList.length;
this.chkAll = checkedList.length === this.columnList.length;
},
ckAllChange(e) {
this.chkAll = e.target.checked
this.indeterminate = false
if (this.chkAll) {
this.createChGroupValue()
} else {
this.ckValues = []
}
},
createColumns() {
if (this.ckValues.length == 0) {
this.$message.error('请至少留下一列')
return
}
this.columns = []
this.ckValues.forEach(item => {
let col = this.columnList.find(f => f.dataIndex == item)
if (col) {
this.columns.push(col)
}
})
}
html使用:
<a-popover v-model="poped" trigger="click" placement="leftBottom">
<template slot="title">
<a-checkbox :checked="chkAll" :indeterminate="indeterminate" @change="ckAllChange">全部</a-checkbox>
</template>
<template slot="content">
<a-checkbox-group v-model="ckValues" :options="columnList"
@change="ckChange" style="width: 120px;">
<span slot="label" :title="option.title" slot-scope="option">{{ option.title }}</span>
</a-checkbox-group>
<a-divider style="margin:5px; "/>
<a-space>
<a-button type="primary" size="small" @click="createColumns">确认</a-button>
<a-button type="primary" size="small" @click="poped=false">取消</a-button>
</a-space>
</template>
<a-button type="primary" icon="table" shape="circle"/>
</a-popover>
checkboxgroup 绑定的是对象数组 :options=“columnList” ,然后用span slot=“label” 修改显示内容,value值是获取数据后就设置了的。