106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<!-- components/UrlSelect.vue -->
|
||
<template>
|
||
<el-select
|
||
v-bind="$attrs"
|
||
v-model="internalValue"
|
||
@change="$emit('change', $event)"
|
||
@blur="$emit('blur', $event)"
|
||
@focus="$emit('focus', $event)"
|
||
@clear="$emit('clear', $event)"
|
||
@visible-change="$emit('visible-change', $event)"
|
||
@remove-tag="$emit('remove-tag', $event)"
|
||
@scroll="$emit('scroll', $event)"
|
||
>
|
||
<!-- 1. 原生 prefix 插槽 -->
|
||
<slot name="prefix" />
|
||
<!-- 2. 如果要实现分组插槽，也照搬 el-option-group 的结构 -->
|
||
<slot name="option-group">
|
||
<!-- 默认选项渲染 -->
|
||
<el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
|
||
</slot>
|
||
<!-- 3. 其他自定义插槽，不指定 name 的默认为 default slot -->
|
||
<slot />
|
||
<!-- 4. 下面这几个插槽是 el-select 也常见的： -->
|
||
<slot name="empty" />
|
||
<slot name="no-match" />
|
||
<slot name="footer" />
|
||
</el-select>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, onMounted } from 'vue';
|
||
import request from '@/utils/axios';
|
||
|
||
// -------------- ① 定义要继承/自定义的 Props --------------
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: [String, Number, Array],
|
||
default: null,
|
||
},
|
||
url: {
|
||
type: String,
|
||
default: null,
|
||
},
|
||
params: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
// 可按需让上层指定 label 字段名、value 字段名
|
||
labelKey: {
|
||
type: String,
|
||
default: 'label',
|
||
},
|
||
valueKey: {
|
||
type: String,
|
||
default: 'value',
|
||
},
|
||
});
|
||
|
||
// -------------- ② 定义要透传回父组件的 Events --------------
|
||
const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'clear', 'visible-change', 'remove-tag', 'scroll']);
|
||
|
||
// -------------- ③ 内部双向绑定 --------------
|
||
// 用一个 ref 存储内部的值
|
||
const internalValue = ref(props.modelValue);
|
||
// 当 prop 变化时，同步到 internalValue
|
||
watch(
|
||
() => props.modelValue,
|
||
(newVal) => {
|
||
internalValue.value = newVal;
|
||
}
|
||
);
|
||
// 当 internalValue 变化时，emit update:modelValue
|
||
watch(internalValue, (newVal) => {
|
||
emit('update:modelValue', newVal);
|
||
});
|
||
|
||
// -------------- ④ 选项列表 --------------
|
||
const options = ref([]);
|
||
|
||
// -------------- ⑤ 请求数据的函数 --------------
|
||
async function fetchOptions() {
|
||
console.log('fetchOptions :>> ', props.url, props.params);
|
||
if (!props.url) return;
|
||
try {
|
||
const res = await request.get(props.url, { params: props.params });
|
||
// 假设后端返回格式: { code: 200, data: { records: [ {...}, {...} ] } }
|
||
// 也可能是直接 data: [{...}, {...}]
|
||
const records = res.data.records;
|
||
if (Array.isArray(records)) {
|
||
options.value = records;
|
||
// console.log('option', options.value);
|
||
} else {
|
||
options.value = [];
|
||
console.log('UrlSelect：接口返回数据格式不是数组，无法解析成 options');
|
||
}
|
||
} catch (err) {
|
||
console.error('UrlSelect：拉取选项失败', err);
|
||
}
|
||
}
|
||
|
||
// -------------- ⑥ 生命周期：组件挂载后立即拉一次数据 --------------
|
||
onMounted(() => {
|
||
fetchOptions();
|
||
});
|
||
</script>
|