topic description
The el-select component ofelement-ui is rendered in jsx mode. If the drop-down option is not selected by clicking the mouse on the page, the native select can be
.sources of topics and their own ideas
the requirement is that there is a drop-down box in the click-button pop-up window messagebox,messagebox. Because messagebox is pure js, I think of implementing
with jsx.related codes
/ / Please paste the code text below (do not replace the code with pictures)
<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>what result do you expect? What is the error message actually seen?
what I expected was that the switch would switch the drop-down box options normally. The result is that the page does not respond, and the change event can be triggered. I can"t find the reason.
Note: it is normal to change el-select and el-option to native select and option.
