<template>
<a-dropdown :trigger="['click']" placement="bottomRight"
overlayClassName="table-column-setting-box"
v-model="visible">
<a-icon type='setting' style='cursor: pointer' class="ml-10" />
<a-menu slot="overlay">
<a-row class="select-group-box">
<a-checkbox-group :value="value" @change="handleChange" class="item-checkbox-group">
<a-row v-for="item in allList" :key="item.name"
class="item" :class="{'checked': value.includes(String(item.name))}"
v-show="item.name !== 'action'">
<a-checkbox :value="item.name"
:disabled="item.configurable === false
|| item.fixed
|| (value.length <= 4 && value.includes(String(item.name)))"
class="item-label">{{item.title}}</a-checkbox>
</a-row>
</a-checkbox-group>
</a-row>
<a-menu-divider />
<a-row class="btns">
<a-button @click="handleOk" :disabled="value.length === 0" class="ok">{{t('Save')}}</a-button>
</a-row>
</a-menu>
</a-dropdown>
</template>
<script lang='ts'>
import { Component, Prop, Vue, Model } from 'vue-property-decorator';
@Component
export default class SettingPopBox extends Vue {
@Model('change', { default: () => [] })
protected value!: string[];
// 所有列
@Prop({type: Array, default: () => []})
protected allList!: TypeBase.TableColumn[];
// 当前选中
protected curSelectedList: string[] = [];
// 弹窗显示状态
protected visible: boolean = false;
// 确认选中
protected handleOk(): void {
this.visible = false;
}
// 复选框变更事件(勾选或取消勾选)
protected handleChange(checkedList: string[]) {
// 固定展示顺序
const resList = this.allList.reduce((pre: string[], item: TypeBase.TableColumn) => {
const res: string[] = [];
if(checkedList.includes(item.name as string)) {
res.push(item.name as string);
}
return pre.concat(res);
}, []);
this.handleEmit(resList);
}
// 处理分发事件
protected handleEmit(data: string[]) {
this.$emit('change', data);
}
}
</script>
<style lang='scss' scoped>
.table-column-setting-box {
.select-group-box{
width: 100%;
max-height: 320px;
overflow-y: auto;
.item-checkbox-group{
width: 100%;
}
}
.ant-row{
width: 100%;
line-height: 40px;
padding: 0 6px;
border-radius: 4px;
user-select: none;
&.item {
height: 40px;
margin-bottom: 2px;
&.checked{
background-color: var(--secondary-color1);
color: var(--brand-secondary-color);
}
&.checked .item-label{
color: var(--brand-secondary-color);
}
&:not(.btns):hover{
background-color: var(--secondary-color1);
color: var(--brand-secondary-color);
.item-label{
color: var(--brand-secondary-color);
}
}
}
.ant-checkbox-wrapper{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btns{
height: 42px;
margin-top: 6px;
padding: 0 12px;
text-align: right;
.ok{
height: 32px;
border-radius: 8px;
}
}
}
</style>
<style lang="scss">
.table-column-setting-box .ant-dropdown-menu{
max-width: 540px;
padding: 6px 0;
}
</style>
Ant design vue 弹窗多选组件
最新推荐文章于 2024-07-03 21:18:58 发布
这是一个使用Vue.js编写的组件,展示了一个底部右对齐的dropdown菜单,用于设置表格列的显示。用户点击设置图标触发弹窗,弹窗内包含checkbox组,用户可以选择要显示的列。当选定列发生变化时,会触发change事件。组件还包含了确认保存和禁用功能,当没有选择任何列时,保存按钮将被禁用。
摘要由CSDN通过智能技术生成