javascript - vue3 render+el-select不能回显是什么问题？

Question

vue3 render函数方式创建el-select，不能回显是什么问题呢？

const handleRemove = () => {    const options = combination.value.mapList[VariableEnum.variable.toString()] ?? [];    const selected = ref();    const content = h("div", {}, [        h("p", { style: { marginBottom: "12px" } }, "已有变量配置绑定此组合方式，如要删除请选择替换组合方式"),        h(            // ElSelect,            'el-select',            {                // onChange: (val: any) => {                "onUpdate:modelValue": (val: number) => {                    selected.value = val;                    console.log(selected.value);                },                // value: selected.value,                modelValue: selected.value,                style: { width: "100%" },                placeholder: "请选择替换组合方式",            },            [                options.map((item: any) =>                    h(ElOption, {                        key: item.id,                        label: item.title,                        value: item.id,                    })                ),            ]        ),    ]);    ElMessageBox({        title: "警告",        message: () => content,    }).then(() => {        console.log(selected.value);        // 处理删除逻辑    });};

Answer 1

h 函数的第一个参数如果是原生标签的话可以传字符串，如果是 vue 组件的话应该传入组件的定义。

Answer 2

找到原因了，conten不是写的函数，这样定义是一个常量了，肯定不会变化了

Answer 3

从你给出的代码片段来看，你正在使用 Vue 3 和 Element UI 的 el-select 组件来创建一个下拉选择框。你提到的问题是 el-select 无法回显（即无法正确显示已选的值）。

以下是我分析的几个可能的问题原因：

1. 绑定的 modelValue 没有正确更新：el-select 的 modelValue 属性应该绑定到一个响应式的数据上。在你的代码中，你使用了 ref() 来创建一个响应式引用，并试图将 modelValue 绑定到这个引用的值上。然而，你并没有在任何地方改变这个引用的值，所以 modelValue 不会自动更新。
2. onUpdate:modelValue 事件处理函数的问题：你在 onUpdate:modelValue 事件处理函数中打印了 selected.value，但是并没有改变它的值。这可能是问题的原因。
3. 确保 ElOption 组件的 value 属性正确设置：每个 ElOption 组件的 value 属性应该设置为与 el-select 的 modelValue 相匹配的值。在你的代码中，每个 ElOption 的 value 属性设置为 item.id，你需要确保这是正确的。

为了解决这个问题，你可以尝试以下修改：

• 在选择一个选项后，更新 selected.value 的值。
• 确保每个 ElOption 的 value 属性设置为与 selected.value 相匹配的值。

下面是一个修改后的代码示例：

const handleRemove = () => {  const options = combination.value.mapList[VariableEnum.variable.toString()] ?? [];  const selected = ref(null); // Initialize to null  const handleSelectChange = (val: number) => {    selected.value = val;    console.log(selected.value);  };  const content = h("div", {}, [    h("p", { style: { marginBottom: "12px" } }, "已有变量配置绑定此组合方式，如要删除请选择替换组合方式"),    h(      'el-select',      {        "onUpdate:modelValue": handleSelectChange,        modelValue: selected.value,        style: { width: "100%" },        placeholder: "请选择替换组合方式",      },      [        options.map((item: any) =>          h(ElOption, {            key: item.id,            label: item.title,            value: item.id,          })        ),      ]    ),  ]);  ElMessageBox({    title: "警告",    message: () => content,  }).then(() => {    console.log(selected.value); // Now this should print the selected value    // 处理删除逻辑  });};

这段代码将在用户选择一个选项后更新 selected.value，这样就能正确回显已选的值了。