Vue3 render函数与el-select组件值回显失效分析及解决方法
在Vue3中，使用render函数结合Element Plus的el-select组件时，常常遇到值无法回显的问题。本文将分析其原因并提供解决方案。
问题描述：
使用render函数动态创建el-select组件，v-model或onUpdate:modelValue绑定数据后，选择值无法在组件上正确显示。
立即学习“前端免费学习笔记（深入）”；
问题代码示例：
<code class="javascript">import { ref, h, ElOption, ElMessageBox } from 'vue';
const handleRemove = () => {
const options = /* ... */; // 假设options是一个数组，包含el-select的选项数据
const selected = ref(null); // 初始化为null，避免初始值干扰
const content = () => h('div', {}, [
h('el-select', {
onUpdate:modelValue: (val) => {
selected.value = val;
console.log('selected value:', selected.value);
},
modelValue: selected.value,
placeholder: '请选择',
}, options.map(item => h(ElOption, {
key: item.id,
label: item.label,
value: item.value,
})))
]);
ElMessageBox({
title: '警告',
message: content,
}).then(() => {
console.log('final selected value:', selected.value);
// ...后续操作
});
};</code>
问题原因：
关键在于content的定义方式。在原始代码中，content是一个直接返回h函数结果的变量，这导致el-select组件只在第一次渲染时被创建，之后即使selected.value发生变化，content也不会重新渲染，从而导致值无法回显。
解决方案：
将content定义为一个函数，使其每次调用时都重新创建el-select组件。这样，当selected.value更新时，content函数会返回一个新的el-select组件，从而实现值的动态更新和回显。
修改后的代码：
<code class="javascript">import { ref, h, ElOption, ElMessageBox } from 'vue';
const handleRemove = () => {
const options = /* ... */;
const selected = ref(null);
const content = () => h('div', {}, [
h('el-select', {
onUpdate:modelValue: (val) => {
selected.value = val;
console.log('selected value:', selected.value);
},
modelValue: selected.value,
placeholder: '请选择',
}, options.map(item => h(ElOption, {
key: item.id,
label: item.label,
value: item.value,
})))
]);
ElMessageBox({
title: '警告',
message: content(), // 注意这里调用了content函数
}).then(() => {
console.log('final selected value:', selected.value);
// ...后续操作
});
};</code>
通过将content定义为函数并调用content()，确保每次ElMessageBox渲染时都会重新创建el-select组件，从而解决值回显问题。 记住，selected需要正确初始化，例如ref(null)或一个默认值。 同时确保options数据正确且及时更新。 如果options数据来源异步，需要考虑异步更新后的重新渲染。
