element-ui的el-select组件采用jsx方式渲染，通过鼠标点击页面选不中下拉选项，原生select可以

Question

题目描述

element-ui的el-select组件采用jsx方式渲染，通过鼠标点击页面选不中下拉选项，原生select可以

题目来源及自己的思路

需求是，点击按钮弹窗messagebox，messagebox中有一个下拉框。因为messagebox是纯js，所以就想到用jsx实现

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>
  <div class="hello">
    <el-button @click="submit">点击打开弹窗</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      netZoneIdMaps: [
        {domainId: '1', name: '名称1'},
        {domainId: '2', name: '名称2'},
        {domainId: '3', name: '名称3'}
      ],
      netZoneId: ''
    }
  },
  methods: {
    submit () {
      let jsxHtml = (
        <div>
          <el-select value={this.netZoneId} onChange={this.setSelect}>
            {this.netZoneIdMaps.map(item => {
              return (
                <el-option
                  key={item.domainId}
                  label={item.displayName}
                  value={item.domainId}>
                </el-option>
              )
            })}
          </el-select>
        </div>
      )
      this.$alert(jsxHtml, {
        type: 'question',
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {})
    },
    setSelect (e) {
      console.log('触发change事件')
      this.netZoneId = e
      console.log(e)
    }
  }
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

我预想的是切换可以正常切换下拉框选项。结果却是页面没有反应，change事件可以触发。没有找到原因。
注：将el-select和el-option改为原生的select和option是正常的。

Answer 1

• dangerouslyUseHTMLString 将message作为html片段处理。
• 然而你只是写的jsx，即 只是想给message传递VNode而已。

Answer 2

onChange事件改为 onInput事件

Answer 3

把
<el-select value={this.netZoneId} onChange={this.setSelect}>
改成
<el-select v-model={this.netZoneId} onInput={this.setSelect}>

这个方式我试了可以，可以试试哈

Answer 4

大佬你现在解决这个问题了吗