vue2.0+Element】弹框嵌套选择器(messsageBox+ELSelect)

19 阅读1分钟

image.png

         async sendNotify(data) {
      const h = this.$createElement
      let _this = this

      this.$msgbox({
        title: '请选择沟通状态',
        message: h(
          Vue.component('SelectItemType', {
            data() {
              return {
                value: _this.NotifyRemark,
              }
            },
            render(h) {
              return h('div', null, [
                h(
                  'el-select',
                  {
                    style: { width: '100%' },
                    props: { value: _this.NotifyRemark || data.NotifyRemark },
                    on: {
                      input: (v) => {
                        _this.NotifyRemark = v
                        _this.$emit('input', v)
                      },
                    },
                  },
                  [
                    ['预约成功', '拒绝', '未接通', '待定'].map((item) => {
                      return h('el-option', {
                        props: {
                          key: item,
                          label: item,
                          value: item,
                        },
                      })
                    }),
                  ],
                ),
              ])
            },
          }),
        ),
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            if (!_this.NotifyRemark) {
              this.$message({
                message: '请选择沟通状态',
                type: 'warning',
              })
            } else {
              done()
            }
          } else {
            done()
          }
        },
      })
        .then(async (action) => {
          if (action === 'confirm') {
            _this.sendNotify1(data,  _this.NotifyRemark)
          }
        })
        .catch((_) => {})
    },