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>
相关推荐
暗不需求2 小时前
React项目架构深度解析:从0到1理解现代前端工程化
前端·javascript·react.js
孙凯亮2 小时前
Electron 项目终极实战总结:从黑屏踩坑到自动更新全流程
前端·electron
wjs20242 小时前
PHP 数组
开发语言
jiayong232 小时前
第 40 课:任务详情抽屉里的编辑 / 删除联动强化
java·开发语言·前端·javascript·vue.js·学习
胡志辉2 小时前
前端反调试:常见套路、识别方法与绕过思路
前端·安全
Mr.mjw2 小时前
vue中使用 postcss-px-to-viewport 插件实现多屏适配
javascript·vue.js·postcss
Rabitebla2 小时前
【数据结构】实现通讯录:基于C语言动态顺序表
c语言·开发语言·数据结构·算法
覆东流2 小时前
第6天:python综合练习——制作简易计算器
开发语言·后端·python
waves浪游2 小时前
进程间通信(上)
linux·运维·服务器·开发语言·c++