标签导航：

vue3 render函数中el-select无法回显值是什么原因？

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函数中映射选项，避免了不必要的复杂性。