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>
相关推荐
默_笙22 分钟前
🌊 向量库和 ES 都查不出"关系",我只好给奶茶建了一张人脉网
前端·javascript
优选资讯34 分钟前
标签打印软件怎么对接 Excel 数据
前端·excel
谢亮_vipxieliang1 小时前
用 PHP 构建轻量级 REST API:从路由到鉴权的完整实践
开发语言·后端·php
思无邪661 小时前
用 AI 做 JS 逆向:从抓包到复现的完整方法论
开发语言·javascript·人工智能
一个风轻云淡2 小时前
GCC 和 GDB命令简单解读
java·linux·前端
H.莓飛2 小时前
【数据结构】二叉树_OJ题
linux·开发语言·数据结构·算法
u0111026752 小时前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说3 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
零基础1233 小时前
Ubuntu 常用命令汇总
linux·运维·开发语言
libokaifa3 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端