vuejs 使用jsx渲染方式，发现el-select 无法回显问题

Question

官方这种是可以回显的

 <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

以下是我用jsx 动态渲染的方式，选中某项的时候，值发现变化了，但是没有回显

export default {
  functional:true,
  render:function (h,context) {
    return h('el-select',{
      props:{
        value:context.props.gradeId,
        placeholder:context.props.placeholder
      },
      on:{
        input:(value)=>{
          context.listeners.input(value)
        }
      },
    },
     [h('el-option',{
       props:{
         value:1,
         label:'一年级',
       }
     }),
       h('el-option',{
         props:{
           value:2,
           label:'二年级',
         }
       }),
       h('el-option',{
         props:{
           value:3,
           label:'三年级',
         }
       })
     ]
    )
  }
}

Answer 1

【以下回答由 GPT 生成】

我可以通过以下步骤来解决这个问题：

1. 确保你已经安装了vue-loader，它是用来编译Vue.js的JSX语法的。
2. 在Webpack的配置文件中，添加以下代码片段： javascript module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ } ] } 这将确保Vue.js的JSX语法会被babel-loader正确编译。
3. 在你的代码中，确保你正确引入了Vue： javascript import Vue from 'vue'
4. 在你的Vue组件中，确保你正确导入了相关的组件： javascript import { ElSelect, ElOption } from 'element-ui'
5. 在你的Vue组件中，正确注册使用到的组件： javascript export default { components: { 'el-select': ElSelect, 'el-option': ElOption }, // ... }
6. 确保你的value属性是双向绑定的，并且在组件的data选项中定义了value属性： javascript data() { return { value: null } }
7. 在你的Vue组件的渲染函数中，使用箭头函数来绑定父组件传入的input事件： javascript render: function (h, context) { return h('el-select', { props: { value: context.props.gradeId, placeholder: context.props.placeholder }, on: { input: (value) => { context.listeners.input(value) } } }, [ // ... ]) }
8. 在使用这个自定义的渲染组件时，确保你传入了正确的v-model绑定和input事件： html <custom-select v-model="selectedValue" @input="handleInput"></custom-select> 其中，selectedValue是你在父组件中定义的响应式数据，handleInput是处理input事件的方法。

如果你按照以上步骤操作，并且确保你的代码中没有其他错误，那么el-select应该能够正确回显选中的值了。如果问题仍然存在，请尝试检查其他部分的代码或在Vue.js的官方论坛中寻求帮助。

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7439895
• 除此之外, 这篇博客: Vue extends拓展任意组件功能(el-select实例)-两种写法中的 写法二、JSX(比较麻烦) 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^