Vue3 render函数与Element-UI Select组件回显问题排查
在Vue3的render函数中使用Element-UI的el-select组件时，如果遇到值无法回显的问题，可能的原因及解决方法如下：
问题代码中，content变量被错误地定义为一个对象，而不是一个返回虚拟DOM元素的函数。在h函数创建虚拟DOM时，需要将content作为回调函数传递。
更正后的代码：
立即学习“前端免费学习笔记（深入）”；
const handleRemove = () => {
const options = combination.value.mapList[VariableEnum.variable.toString()] ?? [];
return h(
'el-select',
{
'onUpdate:modelValue': (val: number) => {
selected.value = val;
console.log(selected.value);
},
modelValue: selected.value,
style: { width: '100%' },
placeholder: '请选择替换组合方式',
},
options.map((item) => h(ElOption, { key: item.id, label: item.title, value: item.id }))
);
};
通过将content改为返回el-select组件及其选项的回调函数，每次渲染时都会根据最新的combination.value.mapList数据动态更新el-select的选项，从而实现正确的回显功能。 注意onUpdate:modelValue的写法，确保数据双向绑定正确。 同时，简化了代码，直接在h函数中映射选项，避免了不必要的复杂性。
