題目描述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是正常的。
element-ui的el-select組件采用jsx方式渲染,通過鼠標點擊頁面選不中下拉選項
梵蒂岡之花
2019-03-21 18:19:38