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>
相关推荐
copyer_xyf1 分钟前
Python 函数全面总结
前端·后端·python
时寒的笔记2 分钟前
瑞数案例欧冶解读py和js文件最终版
开发语言·javascript·ecmascript
zmzb01032 分钟前
Python课后习题训练记录Day123
开发语言·python
艾莉丝努力练剑4 分钟前
【Qt】事件
服务器·开发语言·网络·数据库·qt·tcp/ip·计算机网络
PersistJiao4 分钟前
python环境下免费、专业的中英翻译
开发语言·windows·python·机器翻译
怕浪猫5 分钟前
Electron 开发实战(十):应用打包与分发|全平台打包、签名、自定义协议实战
前端·javascript·electron
rqtz6 分钟前
【C++】源码编译 Qt5.15.3|Ubuntu22.04 下 ROS 开发环境搭建
开发语言·c++·qt·ros
Jun6267 分钟前
QT(9)-Qjson移植
开发语言·qt
施棠海7 分钟前
自定义并可深度定制的数字滚动选择器完整源代码与相关注意事项
java·开发语言
我是伪码农10 分钟前
小程序175-200
前端·javascript·小程序