element messagebox 搭配el-select

element messagebox 搭配el-select_第1张图片

this.$nextTick(() => {
              const h = this.$createElement;
              const that = this
              that.selectVal = ''
              this.$msgbox({
                title: "请选择将要重置的流程节点",
                message: h('el-select',
                  {
                    ref: 'selectView',
                    props: {
                      value: that.selectVal,
                      filterable: true,
                    }, 
                    on: {
                      change: e => {
                        that.selectVal = e
						// 会遇到两种问题 如下图
                        that.$refs.selectView.value = e // select下拉框值改变,回显到页面上

                      },
                    },
                  },
                  [
                    this.wfNodeIdOptions.map(it => {
                      return h('el-option', {
                        props: {
                          label: it.name,
                          key: it.id,
                          value: it.id,
                        },
                      });
                    })
                  ]
                ),
                showCancelButton: true,
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                  if (action === 'confirm') {
                    if (that.selectVal) {
                      done();
                      this.tableLoading = true;
                      jxApi.batchRestart(checkedRows, this.useObject, that.selectVal, (res) => {
                        this.tableLoading = false;
                        if (res.meta.success) {
                          this.$message({
                            message: "重启成功",
                            type: "success",
                          });
                          this.$refs.table.doAjax();
                        }
                      });
                    } else {
                      this.$message.warning('请选择将要重置的流程节点')
                    }
                  } else {
                    done();
                  }
                }
              }).then(action => {
                this.$refs.table.doAjax();
              }).catch(e => { });
            })

onChange事件bug:

如果没有这行代码,that.$refs.selectView.value = e下拉框回显不了
但是有了后存在下面第一种问题,当页面切换进来时,下拉选择提示ref绑定不上。
在这里插入图片描述
就算绑定上了,也会提示下面的错误
在这里插入图片描述
第二个错误还将就用,主要是第一个错误解决不了会出现偶发的bug,谁能救救我

你可能感兴趣的:(Vue,javascript,vue.js)