el-select的label没有没有反显怎么办?

父组件

复制代码
<template>
	<div>
		<ChildForm :form="form1"  />
		<ChildForm :form="form2"  />
	</div>
</template>
<script setup>
import ChildForm from "路径"
const form1 = ref({
	list: [],
})
const form2 = ref({
	list: ""
))
</script>

// 子组件
<template>
	<div>
		<el-form :model="form">
			<el-form-item>
              	<Grandson  />
              </el-form-item>
		</el-form>
	</div>
</template>
<script setup>
import Grandson from "路径"
import { definePops,  reactive, ref, computed, watch } from "vue"
const props = defineProps(["form"]);
const childForm = ref({...props.form});
const  urlObj = reactive({
	url: "请求select地址",
	label: computed(() => childForm.value.list);
	isMultiple: true, // 是否多选
})
// 重点
watch(
() => childForm.value.list,
(newVal) => {
	childForm.value.list = newVal;
}, {
	deep: true,
	immediate: true;
})

子组件

复制代码
<template>
	<div>
		<el-form :model="form">
			<el-form-item>
              	<Grandson :form="urlObj"  />
              </el-form-item>
		</el-form>
	</div>
</template>
<script setup>
import Grandson from "路径"
import { definePops,  reactive, ref, computed, watch } from "vue"
const props = defineProps(["form"]);
const childForm = ref({...props.form});
const  urlObj = reactive({
	url: "请求select地址",
	label: computed(() => childForm.value.list);
	isMultiple: true, // 是否多选
})
// 重点
watch(
() => childForm.value.list,
(newVal) => {
	childForm.value.list = newVal;
}, {
	deep: true,
	immediate: true;
})
</script>

孙组件

复制代码
<template>
	<div>
		<el-select v-model="grandSonUrlObj.label" :multiple="isMultiple">
			<el-option v-for="item in options" :key="item.id" :value="item.value" :label="item.label"></el-option>
		</el-select>
	</div>
</template>
<script setup>
import { definePops,  reactive, ref, computed, watch, onMouted, nextTick } from "vue"
const props = defineProps(["form"]);
const grandSonUrlObj = ref({...props.urlObj});
const  options = ref([]);

onMouted(() => {
	getOptions();
})
// 重点
watch(
	() => groupSonUrlObj.value.label,
	(newVal) => {
		if(typeof(newVal) === 'string'){
		grandSonUrlObj.name = newVal || "";
	}
	if (Array.isArray(newVal)) {
		grandSonUrlObj.name = newVal || [];
	}
}, {
	deep: true,
	immediate: true;
});

const getOptions = async () => {
	const res = await initOptions();
	options.value = res;
	// 重点
	await nextTick();
}
const initOptions = async () => {
	const res =  await axios.get(grandUrlObj.value.label);
	// 操作内容
	return res.data.map(el => {
		id: String(el.id),
		label: el.label,
	})
}

</script>
相关推荐
ch_atu5 分钟前
使用python下载modelscope上的模型
开发语言·python
IT_陈寒6 分钟前
Vite的静态资源路径搞得我头秃,原来这样配才对
前端·人工智能·后端
Albart57521 分钟前
Python爬虫请求头伪装后仍被反爬,基于代理池+随机延迟的绕过实战
开发语言·爬虫·python
Promise微笑24 分钟前
回路电阻测试仪采购:多维度技术评估与深度避坑指南
开发语言·matlab·语音识别
BerryS3N28 分钟前
前端应用的离线暂停更新策略:构建稳定可靠的渐进式部署方案
前端
從南走到北36 分钟前
JAVA无人共享系统无人场馆预约篮球系统源码支持小程序+公众号+APP+H5
java·开发语言·小程序
码智社39 分钟前
Maven 零基础完整教程
java·开发语言·maven
半夜修仙43 分钟前
Spring集成邮箱功能
java·开发语言·spring boot·spring·rabbitmq·github·maven
LaughingZhu1 小时前
Product Hunt 每日热榜 | 2026-07-17
前端·数据库·人工智能·经验分享·mysql·chatgpt·html
潇凝子潇1 小时前
UnsupportedOperationException
java·前端·数据库