Ant design vue 弹窗多选组件

<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>