Vue3 render函数与Element-UI Select组件回显问题排查
在Vue3的render函数中使用Element-UI的el-select组件时，如果遇到值无法回显的问题，可能的原因及解决方法如下：
问题代码中，content变量被错误地定义为一个对象，而不是一个返回虚拟DOM元素的函数。在h函数创建虚拟DOM时，需要将content作为回调函数传递。
更正后的代码：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">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 }))
);
};</code>通过将content改为返回el-select组件及其选项的回调函数，每次渲染时都会根据最新的combination.value.mapList数据动态更新el-select的选项，从而实现正确的回显功能。 注意onUpdate:modelValue的写法，确保数据双向绑定正确。 同时，简化了代码，直接在h函数中映射选项，避免了不必要的复杂性。
以上就是Vue3 render函数中El-select无法回显值是什么原因？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
881
