Ant Design Vue3 下拉框封装组件（全选，全不选）功能

佛系梅菜

已于 2022-10-27 16:11:03 修改

阅读量1.3k

点赞数 2

文章标签： javascript vue.js 前端框架

于 2022-10-27 15:24:36 首次发布

本文链接：https://blog.csdn.net/qq_42455079/article/details/127552504

版权

Ant Design Vue3 下拉框封装组件（全选，全不选）功能

hooks文件（filterSlots.js）

import { ref, useSlots } from 'vue'

/**
 * 过滤出父组件正在使用的插槽
 * @param {*} slotList
 * @returns
 */
export function useFilterSlots(slotList) {
    const getSlotList = ref([])
    const slotsNames = Object.keys(useSlots())
    const slots = slotList.filter(item => slotsNames.includes(item))
    slots.length && (getSlotList.value = slots)
    return {
        getSlotList
    }
}

封装下拉框组件

<template>
    <a-select
        showArrow
        :getPopupContainer="triggerNode => triggerNode.parentNode"
        v-bind="$attrs"
        :mode="mode"
        :style="style"
        :placeholder="placeholder"
        :max-tag-count="maxTagCount"
        :dropdown-class-name="computedDropdownClassName"
        :filter-option="handleFilterOption"
        :field-names="fieldNames"
        @change="handleChange"
    >
        <template v-if="mode === 'multiple'" #dropdownRender="{ menuNode: menu }">
            <div v-if="buttons" class="operation-buttons">
                <a-button type="primary" class="select-all" @click="handleSelect(true)">全选</a-button>
                <a-button @click="handleSelect(false)">取消</a-button>
            </div>

            <v-nodes :vnodes