vue2 element 下拉多选回显失败

Question

急！！要这样效果，点击按钮展示弹窗有个下拉选择，可多选可搜索，这两个已经实现，问题在于对于新增了已选中数据回显功能后，再次操作视图不更新，只有页面刷新后第一次视图有跟着变化，但实际上数据都是新的，用了this.$nextTick也不管用。选中数据回显是根据表格里row.users数据筛选的符合el-select数据形式如：[29,39]

代码

 <!-- 添加分销啇 -->
        <el-form-item v-show="this.isAddUser===true" label="可分销用户" prop="leveltest">
          <el-select v-model="dialogForm.selectedList" multiple filterable collapse-tags placeholder="请选择"
            @change="handleSelectChange" ref="select" :filter-method="filterOptions">
            <el-option v-for="item in dialogForm.options.slice(0, 2)" :key="item.id" :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="this.isAddUser===true" label="已选择用户">
          <template>
            <div class="tag">
              <el-tag v-for="id in dialogForm.selectedList" :key="id" closable @close="removeTag(id)">
                {{ getOptionLabel(id) }}
              </el-tag>
            </div>
          </template>
        </el-form-item>
    //弹窗-添加分销啇
      handleDetail(row) {
        console.log('row,这里获取编辑内容', row.users)
        this.addDialog = true
        this.isAddUser = true
        this.title = '添加分销啇'
        this.goodsID = row.id
        this.fetchDataUser()//获取下拉列表所有数据
        console.log(this.test)
        // 使用正则表达式匹配括号内的数字
        const idRegex = /\[(\d+)\]/g;
        // 用于存储所有匹配到的ID的数组
        let ids = [];
        if(row.users.length!=0){
            //有选中数据的回显
           row.users.forEach(user => {
          // 使用match方法找到所有匹配的ID
          const matches = user.match(idRegex);
          // 如果找到了匹配项，将它们添加到ids数组中
          if (matches) {
            matches.forEach(match => {
              // 提取括号内的数字，并将其转换为整数
              const id = parseInt(match.slice(1, -1), 10);
              ids.push(id);
            });
          }
        });
        this.dialogForm.selectedList =ids
        console.log('ids,', this.dialogForm.selectedList,ids)
        }else{
          this.dialogForm.selectedList =[]
        }
      },
  //添加分销商时选择用户数据
       fetchDataUser() {
        getListUser(this.goodsID).then((dataID) => {
          //搜索
          this.dialogForm.options = dataID
          //初始数据
          this.test = dataID
        })
      },
 //tag展示选中内容
      getOptionLabel(value) {
        // const option = this.dialogForm.options.find(item => item.id === value);
        const option = this.test.find(item => item.id === value);
        return option ? option.name : '';
      },
 //tag移除
      removeTag(value) {
        // this.dialogForm.selectedList.splice(this.dialogForm.selectedList.indexOf(value), 1);
        // 使用filter而不是splice来创建一个新数组
          let arr= this.dialogForm.selectedList.filter(id => id !== value);
          console.log(value, this.dialogForm.selectedList);
          // 使用Vue.nextTick等待DOM更新
          this.$nextTick(() => {
            // 检查视图是否更新
            this.dialogForm.selectedList =arr
            console.log('Updated selected list:', this.dialogForm.selectedList);
          });
        // console.log(value,this.dialogForm.selectedList)
      },
      // select自定义搜索逻辑，没问题了
      filterOptions(value) {
        if (value) {
          const visibleOptions = this.dialogForm.options.filter(
            option => option.name.toLowerCase().includes(value.toLowerCase())
          );
          this.dialogForm.options = visibleOptions
        } else {
          this.dialogForm.options = this.test;
        }
      },
      //select选中赋值
      handleSelectChange(values) {
        console.log(values)
        this.$nextTick(() => {
          // 检查视图是否更新
          this.dialogForm.selectedList = values;
          console.log('Updated selected list:', this.dialogForm.selectedList);
        });
      },

Answer 1

确保回显时触发Vue重新渲染，使用this.$forceUpdate()。

以上回复有部分引自免费微信小程序：皆我百晓生。 如问题尚未解决，还请稍待，如有疑问请回复进一步沟通。