To write a text with an El-select box, you don’t need to use an El-Dialog. Write an el-Dialog and add a bunch of properties like: Width, top, Append-to-body, close-on-click-modal, and el-Dialog do not have a footer button by default, so you need to add an el-button to the footer. In addition, the internal style needs to be written again, the style in el-Messagebox is not fragrant. This is clearly not the development model I want.

After all, Bill Gates has said that if you can use a service dialog, you should avoid using a Template dialog

Back to the point. So I started the development journey of replacing El-Dialog with El-MessageBox. If you look at the Element documentation, the message dialog can be implemented with $createElement

So I’ll do it as it’s written on the official website:

<template>
  <el-button @click="open">Open the popup window</el-button>
</template>
<script>
export default {
  methods: {
    async open() {
      let sex = 'unknown'
      const h = this.$createElement
      await this.$msgbox({
        title: 'tip'.message: h('p'['Sex selection',
          h('el-select', {
            props: {
              value: sex
            },
            on: {
              change: val= > (sex = val)
            },
            style: {
              marginLeft: '1em'}},'male'.'woman'.'unknown'].map(sex= > {
            return h('el-option', {
              key: sex,
              props: {
                label: sex,
                value: sex
              }
            })
          }))
        ])
      })
      alert(sex)
    }
  }
}
</script>
Copy the code

Effect:

Select * from (select);

$slot.default = $slot.default = $slot.default = $slot.default = $slot.default = $slot.default

It immediately occurred to me that if Message is a VNode, why not use VueComponent instead? Then it can be transformed into:

<template>
  <el-button @click="open">Open the popup window</el-button>
</template>
<script>
import Vue from 'vue'

const MessageboxSelect =  Vue.component('messagebox-select', {
  data() {
    return {
      value: 'unknown'}},render() {
    const h = this.$createElement
    return h('p'['Sex selection',
      h('el-select', {
        props: {
          value: this.value
        },
        on: {
          change: val= > (this.value = val)
        },
        style: {
          marginLeft: '1em'}},'male'.'woman'.'unknown'].map(sex= > {
        return h('el-option', {
          key: sex,
          props: {
            label: sex,
            value: sex
          }
        })
      }))
    ])
  }
})

export default {
  methods: {
    async open() {
      const h = this.$createElement
      await this.$msgbox({
        title: 'tip'.message: h(MessageboxSelect)
      })
    }
  }
}
</script>
Copy the code

However, this can cause a problem, the popover disappears and then opens up the previous state, instead of regenerating the original state

Then you’re done. Just put Vue.component() inside open

<template>
  <el-button @click="open">Open the popup window</el-button>
</template>
<script>
import Vue from 'vue'

export default {
  methods: {
    async open() {
      let sex = 'unknown'
      const h = this.$createElement
      await this.$msgbox({
        title: 'tip'.message: h(Vue.component('messagebox-select', {
          data() {
            return {
              value: sex
            }
          },
          render() {
            const h = this.$createElement
            return h('p'['Sex selection',
              h('el-select', {
                props: {
                  value: this.value
                },
                on: {
                  change: val= > (sex = this.value = val)
                },
                style: {
                  marginLeft: '1em'}},'male'.'woman'.'unknown'].map(sex= > {
                return h('el-option', {
                  key: sex,
                  props: {
                    label: sex,
                    value: sex
                  }
                })
              }))
            ])
          }
        }))
      })
      alert(sex)
    }
  }
}
</script>
Copy the code

Final!!!!!