Vue3 render函数中El-Select回显失效的解决方案
在Vue3的render函数中使用Element Plus的el-select组件时，回显功能失效是一个常见问题。 本文将分析问题根源并提供有效的解决方案。
以下代码片段展示了常见的错误写法：
const content = h("div", {}, [
// ...
h(
'el-select',
{
"onUpdate:modelValue": (val: number) => {
selected.value = val;
console.log(selected.value);
},
modelValue: selected.value,
// ...
},
// ...
),
// ...
]);
问题在于content被定义为一个常量，导致selected值的变化不会更新el-select的modelValue。 el-select组件在初始渲染后不会自动重新渲染以反映selected的变化。
立即学习“前端免费学习笔记（深入）”；
解决方案：使用函数式组件
为了解决这个问题，需要将content定义为一个函数，使其在每次需要更新时都能重新计算并返回最新的虚拟DOM。
修改后的代码如下：
const getContent = () => {
return h("div", {}, [
// ...
h(
'el-select',
{
"onUpdate:modelValue": (val: number) => {
selected.value = val;
console.log(selected.value);
},
modelValue: selected.value,
// ...
},
// ...
),
// ...
]);
};
通过将content转换为函数getContent，每次组件需要重新渲染时（例如，在selected值发生变化后），getContent函数都会被调用，从而创建新的虚拟DOM，并使用最新的selected.value更新el-select组件的modelValue，最终实现正确的回显功能。 记住，selected需要使用ref()进行声明，例如：const selected = ref(initialValue);。 确保initialValue是正确的初始值。
通过以上方法，可以有效解决Vue3 render函数中el-select组件回显失效的问题。 关键在于理解React式系统的工作原理，并使用函数式组件来确保组件的响应性。
