官方这种是可以回显的
<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:'三年级',
}
})
]
)
}
}
【以下回答由 GPT 生成】
我可以通过以下步骤来解决这个问题：
vue-loader，它是用来编译Vue.js的JSX语法的。javascript module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ } ] } 这将确保Vue.js的JSX语法会被babel-loader正确编译。javascript import Vue from 'vue'javascript import { ElSelect, ElOption } from 'element-ui'javascript export default { components: { 'el-select': ElSelect, 'el-option': ElOption }, // ... }value属性是双向绑定的，并且在组件的data选项中定义了value属性： javascript data() { return { value: null } }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) } } }, [ // ... ]) }v-model绑定和input事件： html <custom-select v-model="selectedValue" @input="handleInput"></custom-select> 其中，selectedValue是你在父组件中定义的响应式数据，handleInput是处理input事件的方法。如果你按照以上步骤操作，并且确保你的代码中没有其他错误，那么el-select应该能够正确回显选中的值了。如果问题仍然存在，请尝试检查其他部分的代码或在Vue.js的官方论坛中寻求帮助。
【相关推荐】