ant design 里面的Select控件在多选模式下支持一键全选/空选

ant design 里面的Select控件在多选模式下支持一键全选/空选

html:
使用 dropdownRender 对下拉菜单进行自由扩展（可自定义下拉框里面的东西）。
是给下拉框的数据占位
是给按钮占位

<a-form-item label="接收单位" name="receiveOrgIdStr">
   <a-select
     v-model:value="formState.receiveOrgIdStr"
     style="width: 100%"
     mode="multiple"
     :maxTagCount="9"
     placeholder="请选择"
     @change="receiveOrgIdStrChange"
     :disabled="modelEditOrNewTitle === '详情'"
   >
     <template #dropdownRender="{ menuNode: menu }">
       <v-nodes :vnodes="menu" />
       <a-divider style="margin: 4px 0" />
       <div
         style="
           padding: 4px 8px;
           cursor: pointer;
           display: flex;
           justify-content: flex-end;
           align-items: center;
         "
       >
         <a-button @click="selectAll" size="small">全选</a-button>
         <a-button
           type="danger"
           style="margin: 8px"
           @click="clearAll"
           size="small"
           >清空</a-button
         >
       </div>
     </template>
     <a-select-option
       :value="item.name"
       v-for="(item, index) in receiveOrgIdStrStatus"
       :key="index"
       >{{ item.name }}</a-select-option
     >
   </a-select>
 </a-form-item>

组件库里面有

js:

import { Divider } from "ant-design-vue";
components: {
    ADivider: Divider,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
},

据情况而定获取下拉列表数据：

setup() {
	const queryNoticeDetailById = (id: Number) => {
	  confirmLoading.value = true;
	  post(API.appManage.queryNoticeDetailById, {
	    params: {
	      id: id,
	    },
	  })
	    .then((res: any) => {
	      formState.id = res.data.id;
	      formState.content = res.data.content ? res.data.content : "";
	      formState.title = res.data.title ? res.data.title : "";
	      res.data.firstImg ? formState.imgList.push(res.data.firstImg) : "";
	      res.data.secondImg ? formState.imgList.push(res.data.secondImg) : "";
	      res.data.thirdImg ? formState.imgList.push(res.data.thirdImg) : "";
	
	      formState.noticeType = res.data.noticeType ? res.data.noticeType : "";
	      //
	      formState.createTime = res.data.createTime
	        ? moment(res.data.createTime).format("YYYY-MM-DD HH:mm:ss")
	        : "";
	
	      // let list: Array<number> = [];
	      // receiveOrgIdStrStatus.value.forEach((item: any) => {
	      //   formState.receiveOrgIdStr?.forEach((itms: any) => {
	      //     if (item.name === itms) {
	      //       list.push(item.id);
	      //     }
	      //   });
	      // });
	      // let str = list.join(",");
	      let list: Array<string> = [];
	      if (res.data.receiveOrgIdList) {
	        let arr = res.data.receiveOrgIdList;
	        receiveOrgIdStrStatus.value.forEach((item: any) => {
	          arr.forEach((itms: any) => {
	            if (item.id === itms && res.data.sendOrganizationId !== itms) {
	              list.push(item.name);
	            }
	          });
	        });
	      }
	      formState.receiveOrgIdStr = list;
	      console.log(formState.imgList);
	      confirmLoading.value = false;
	    })
	    .catch((res) => {
	      confirmLoading.value = false;
	      message.error(res);
	    });
	};

事件：

	// 全选 -- 把数据源赋给select绑定的值
	const selectAll = () => {
	    let arr: any = [];
	    receiveOrgIdStrStatus.value.forEach((item: any) => {
	      arr.push(item.name);
	    });
	    formState.receiveOrgIdStr = arr;
	};
	// 清空 -- 清空select绑定的值
	const clearAll = () => {
	    formState.receiveOrgIdStr = [];
	};
	return {
	    selectAll,
	    clearAll,
	}
}