Vue3 Render函数中El-Select回显失败：如何正确使用ref解决？-js教程-PHP中文网

Vue3 Render函数中El-Select回显失败：如何正确使用ref解决？

碧海醫心

发布： 2025-02-23 10:30:14

原创

588人浏览过

vue3 render函数中el-select回显失败：如何正确使用ref解决？

Vue3 render函数中El-Select回显失效的解决方案

在Vue3的render函数中使用Element Plus的el-select组件时，回显功能失效是一个常见问题。本文将分析问题根源并提供有效的解决方案。

以下代码片段展示了常见的错误写法：

<code class="javascript">const content = h("div", {}, [
  // ...
  h(
    'el-select',
    {
      "onUpdate:modelValue": (val: number) => {
        selected.value = val;
        console.log(selected.value);
      },
      modelValue: selected.value,
      // ...
    },
    // ...
  ),
  // ...
]);</code>

登录后复制

问题在于content被定义为一个常量，导致selected值的变化不会更新el-select的modelValue。 el-select组件在初始渲染后不会自动重新渲染以反映selected的变化。

立即学习“前端免费学习笔记（深入）”；

解决方案：使用函数式组件

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

为了解决这个问题，需要将content定义为一个函数，使其在每次需要更新时都能重新计算并返回最新的虚拟DOM。

修改后的代码如下：

<code class="javascript">const getContent = () => {
  return h("div", {}, [
    // ...
    h(
      'el-select',
      {
        "onUpdate:modelValue": (val: number) => {
          selected.value = val;
          console.log(selected.value);
        },
        modelValue: selected.value,
        // ...
      },
      // ...
    ),
    // ...
  ]);
};</code>

登录后复制

通过将content转换为函数getContent，每次组件需要重新渲染时（例如，在selected值发生变化后），getContent函数都会被调用，从而创建新的虚拟DOM，并使用最新的selected.value更新el-select组件的modelValue，最终实现正确的回显功能。记住，selected需要使用ref()进行声明，例如：const selected = ref(initialValue);。确保initialValue是正确的初始值。