antd-vue - - - - - select自定义渲染[封装select组件]

1. 期望效果

标签值和option展示不一致！

2. 代码展示

官网地址:【antd-vue select】

封装的select组件：

<template>
  <a-form ref="refForm" :model="selectConfig" :labelCol="_labelCol">
    <a-form-item label="管理员" name="list" :rules="selectConfig.rules">
      <a-select
        popupClassName="custom-search"
        v-model:value="selectConfig.list"
        mode="multiple"
        style="width: 100%"
        placeholder="请选择管理员"
        show-search
        :default-active-first-option="false"
        :filter-option="false"
        :not-found-content="null"
        @search="searchAdminList"
        :options="selectConfig.options"
      >
        
        <template #option="{ label, dept_name }">
            {{ label }} {{ !!dept_name ? `(${dept_name})` : '' }}
        template>
        
        <template #tagRender="{ label, closable, onClose }">
          <a-tag :closable="closable" style="margin-right: 3px" @close="onClose">
            {{ label }} 
          a-tag>
        template>
      a-select>
    a-form-item>
  a-form>
template>
<script setup lang="ts">
import { searchAdmin } from '@/api/common';

const props = defineProps({
  _rules: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  _options: {
    type: Array,
    default: () => {
      return [];
    },
  },
  _list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  _labelCol: {
    type: Object,
    default: () => ({
      style: {
        width: '90px',
      },
    }),
  },
});

const refForm = ref(null);

const selectConfig = reactive({
  rules: props._rules ? [{ required: true, message: '请选择管理员' }] : [],
  options: [],
  list: [],
});

watch(
  props,
  val => {
    selectConfig.options = val._options;
    selectConfig.list = val._list;
  },
  {
    deep: true,
    immediate: true,
  },
);

/**
 * 搜索管理员
 */
function searchAdminList(e) {
  if (!e) return;
  searchAdmin({ keyword: e }).then(res => {
    if (res.code === 0) {
      const options = res.data.users.reduce((pre, cur) => {
        return [
          ...pre,
          {
            label: cur.name,
            value: cur.momoid,
            dept_name: cur.dept_name,
          },
        ];
      }, []);
      selectConfig.options = [].concat(options);
    }
  });
}

/**
 * 表单校验
 */
function formRules() {
  return refForm.value
    .validate()
    .then(() => {
      return true;
    })
    .catch(() => {
      return false;
    });
}

/**
 * 获取value值
 */
function getValue() {
  return selectConfig.list;
}

/**
 * 将子组件方法暴露给父组件
 */
defineExpose({
  formRules,
  getValue,
});
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134