vue动态绑定ref以及获取/msgbox与el-select 结合使用的bug解决

屋檐上的大修勾

已于 2024-04-23 09:14:37 修改

阅读量215

点赞数 2

文章标签： vue.js bug 前端 vue javascript

于 2024-04-15 09:43:20 首次发布

本文链接：https://blog.csdn.net/WantFK/article/details/137767287

版权

我们需要动态绑定不一样的ref（比如 Arr1、Arr2、Arr3这种），那么我们如何实现呢？

设置：

 var int=Math.round(Math.random()*100);

var refModel='selectView_st'+int;

ref=refModel

获取：

that.$refs[`selectView_st${int}`
this.$refs[`selectView_st${int}`][0] 有时候返回是数组 需要选择 看情况

什么时候需要？

msgbox与el-select 结合使用的bug：切面切换后无法给el-select回显因为获取不到这个ref 报错
解决：

classify(){
      const h = this.$createElement;
      const that = this
      var int=Math.round(Math.random()*100);
      that.refModel='selectView_st'+int;
      this.$msgbox({
        title: "请选择数据",
        message: h('el-select', 
          {
            props: {
              value: that.schemeIDForDisplayName,
              filterable: true,
            },
            
            ref: that.refModel,
            on: {
              change:event  => {
                 that.schemeIDForDisplay = event;          

                 for (var i = 0; i <this.optionList.length ; i++) { 
                  if(this.optionList[i].id==event){
                    that.schemeIDForDisplayName=this.DisposeString(that.optionList[i]) ;     
                    that.$refs[`selectView_st${int}`].$el.querySelector('.el-input__inner').value = that.schemeIDForDisplayName;                  
                  }
                 }      
              },
            },
          },
          [
            this.optionList.map(it => {
              return h('el-option', {
                props: {
                  label: this.DisposeString(it),
                  key: it.id,
                  value: it.id,
                },
              });
            })
          ]
        ),
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定', 
        cancelButtonText: '取消',
      }).then( _ => {       
      	// 成功操作。。。。
      }).catch(msg => {
      	// 取消操作。。。。
      });
    },