vue elementUI select组件更新 选项池 数据更新视图不更新

  • Z时代
  • 2024-02-26
  • 分类：IT

做项目用到了elementUI 的select组件（可搜索的select）
因为组件中涉及到多个相同的select组件 每个select组件绑定的值对应一个对象中的唯一key data中也定义相关的数据
现在的问题是在我执行搜索过滤以后 过滤后的值已经更新 但是视图依然是全部选项的视图 也用了this.$set 不知道是什么原因请各位大佬帮忙看下 谢谢哈

<el-select
  v-model="scope.row.code"
  placeholder="请选择"
  filterable
  :filter-method="((data)=>{deptOptionsFilter(data, scope.row.uuid)})"
  @change="currentAllDeptChangeE(scope.row.uuid)"
>
  <el-option
    v-for="item in deptOptionsE[scope.row.uuid]"
    :key="item.code"
    :label="item.name"
    :value="item.code"
  />
</el-select>

对应方法

async deptOptionsFilter(data, uuId) {
      console.log(uuId);
      if (data) {
        const res = await OrderATermAction.TermEdit.getUnDrugTermDept({
          deptInfo: data
        });
        this.$set(this.deptOptionsE, uuId, []);
      }
    },

在console.log 中 唯一标识 对应正确 结果也正确就是视图不刷新vue elementUI select组件更新 选项池 数据更新视图不更新

打印第一行为动态添加该组件时的唯一标识
打印第二行为修改行的唯一标识
打印第三行为更新后的select目标池数据

回答：

问题找到了 问题不在后期赋值 而在以第一次赋值没有用set 造成后续无法监听

以上是 vue elementUI select组件更新 选项池 数据更新视图不更新 的全部内容， 来源链接： utcz.com/p/936200.html

回到顶部