element messagebox 搭配el-select

D.U.S.Tべ

已于 2023-03-28 14:52:29 修改

阅读量2.8k

点赞数 2

分类专栏： Vue 文章标签： javascript vue.js

于 2023-03-03 11:57:38 首次发布

本文链接：https://blog.csdn.net/m0_48276047/article/details/129317027

版权

Vue 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

文章描述了一个在Vue应用中使用$nextTick更新组件状态的问题，特别是在el-select组件中遇到的回显和ref绑定异常。在change事件处理函数中，作者尝试了更新select的值，导致了一些偶发的bug。用户在确认对话框中选择流程节点进行重置操作时，如果未选择节点会显示警告，已选择则调用接口重启流程。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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，谁能救救我