在使用Ant Design Vue框架的a-select组件时,因为没有全选功能,需要自己使用插槽增加全选和取消全选功能;根据官方文档提供的方法,完美解决
template模板部分
<a-form-item label="岗位" name="skillPositionValue">
<a-select
v-model:value="data.detailObj.skillPositionValue"
style="width: 100%"
placeholder="请选择岗位"
mode="multiple"
@change="handleChange"
>
<a-select-option v-for="item in data.dictObj.jnzcygw" :value="item.optionValue">{{ item.optionName }}</a-select-option>
<template #dropdownRender="{ menuNode: menu }">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div
style="cursor: pointer"
@mousedown="e => e.preventDefault()"
@click="addItem"
>
<a-button type="link" @click="selectAll">全选</a-button>
<a-button type="link" @click="clearAll">清空</a-button>
</div>
</template>
</a-select>
</a-form-item>
script部分
<script setup lang="ts">
import { defineComponent } from 'vue'
const VNodes = defineComponent({
props: {
vnodes: {
type: Object,
required: true,
},
},
render() {
return this.vnodes;
},
});
</script>