效果
![](https://i-blog.csdnimg.cn/blog_migrate/3b95fbbf8868b5c095984fb3e6ffc24e.png)
代码
<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>