自定义 Select 选择器

• 父组件 import lcaPanel from '@/components/lcaPanel.vue'

<template>
    <selectRole v-model:value="roleCode" @call="onCall" />
</template>
<style lang="less" scoped></style>
<script setup>
import {ref} from "vue";
import selectRole from '@/components/selectRole.vue'
const roleCode = ref('0')
const onCall = () => {
    console.log('选中的值为',roleCode)
}
</script>

• 子组件：

<!--
* @description 角色单选
* @fileName selectRole.vue
* @use <selectRole v-model:value="roleCode" @call="onCall" />
!-->
<template>
  <a-select
    :value="modelValue"
    show-search
    placeholder="Select a person"
    @change="handleChange"
  >
    <a-select-option
      v-for="item in options"
      :key="item.roleCode"
      :value="item.roleCode"
    >
      {{ item.roleName }}({{ item.roleCode }})
    </a-select-option>
  </a-select>
</template>
<style lang="less" scoped>
</style>
<script setup>
import { ref, onMounted } from "vue";
import rbacApi from "@/api/rbacApi.js";
const options = ref([]);
// 接收props参数
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:modelValue", 'call']);
const handleChange = (value) => {
  emit("update:modelValue", value);
  emit("call");
};
// console.log(props)
// 页面数据初始化加载入口
onMounted(() => {
  getAllFn();
});
// 获取数据
const getAllFn = () => {
  rbacApi.getAll().then((res) => {
    if (res.resultCode == "SUCCESS") {
      options.value = res.data || [];
    }
  });
};
</script>