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>
相关推荐
Brilliantwxx15 分钟前
【STM32】 SPI阻塞式通信与HAL源码(串口读ID实战)
开发语言·stm32·单片机·嵌入式硬件·ecmascript
吠品27 分钟前
Nginx负载均衡配置与线上故障排查的一些经验
java·开发语言·数据库
边境悍匪33 分钟前
蜗牛学苑 Java 智能体学习 Day44|Vue 前端项目搭建 思维导图复盘
java·开发语言·spring boot·学习·阿里云
wuyk55541 分钟前
Python实战项目01:简易记事本系统
开发语言·python
flash俊杰43 分钟前
ASR 转写与字幕时间轴:强制对齐、CPS 约束与 SRT 工程化
前端
前端炒粉1 小时前
AI工具面经
前端
唐小码1 小时前
裁员的风刮到了三线荒凉的城市
前端
君顾11 小时前
本地城市社区家政物业联动系统源码:架构设计与派单联动实战
java·开发语言·健身房
晚安日记wanna1 小时前
React 为何不做双端 diff?Vue 与 React 更新逻辑的三层差异
前端·react.js·面试
flash俊杰1 小时前
AI 分段引擎与自动剪辑决策:从语义片段到时间线草稿的映射
前端·ai编程