Ant Design Vue组件中的Select 选择器实现全选/全不选功能_a-select 全选

效果

代码

<template>
    <a-select
        :value="text"
        placeholder="请选择类型"
        style="width:100%"
        showArrows
        mode="multiple"
        @change="onchange"
    >
        <div slot="dropdownRender" slot-scope="menu">//全选插槽
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0;" />
            <div style="padding: 4px 8px; cursor: pointer;" @mousedown="e => e.preventDefault()">
                <a-button type="link" @click="selectAll">全选</a-button>
                <a-button type="link" @click="clearAll">清空</a-button>
            </div>
        </div>
        <a-select-option v-for="(item,index) in couponTypeOpts" :key="index" >
            {{ item.label }}
        </a-select-option>
    </a-select>
</template>
<script>
    export default {
        name:"all-select",
        props: {
            dict:String
        },
        components:{
            VNodes: {
                functional: true,
                render: (h, ctx) => ctx.props.vnodes
            }
        },
        data() {
            return {
                text:[],
                couponTypeOpts:[],
            }
        },
        watch: {
            text(val) {
                this.$emit('input', val);
            },
        },
        created() {
            console.log(this.dict)
            this.getCouponType()
        },
        methods: {
             getCouponType(){
                this.$getDict(this.dict).then((list)=>{
                    list = list.map((i)=>{
                        return {
                            label: i.dictLabel,
                            value: i.dictValue
                        }
                    })
                    this.couponTypeOpts = list;
                })
            },
            onchange(value){
                console.log(value)
                this.text=value
            },
            selectAll(){
                this.text=[]
                this.text=this.couponTypeOpts.map((item,index)=>{
                    return Number(index)
                })
                console.log(this.text)
            },
            clearAll(){
                this.text=[]
 
            }
        },
    }
</script>