vue的table表格选择回显不显示

原创于 2025-05-12 11:22:45 发布 · 386 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

但是错误的效果：

代码：

infoChange() {
      if (this.info.id) {
        this.loading= true;
        var param = {
          id: this.info.id
        }
        getList(param).then(res => {
          this.info.list = res.rows; 
          //整理格式...一顿数据操作，这里忽略
          if (this.info.list && this.info.list.length > 0) {
           

            //TODO 数据选择后回显
            this.$refs.multipleTable.clearSelection()
              var numbers = this.info.changeNumbers.split(',');
              if (numbers && numbers.length > 0) {
                numbers.forEach(item => { //numbers：选择行的不重复的字段，比如主键
                  this.info.list.forEach(row => {// this.info.list：table中绑定的参数
                    if (item == row.assetNumber) {
                      //table数据回显
                      this.$nextTick(() => {
                        //multipleTable：table的ref定义名
                        this.$refs.multipleTable.toggleRowSelection(row, true);
                      });
                    }
                  });
                })
              }

            this.loading= false;
          }
        }).catch(() => {
          this.loading= false;
        });
      }
    },

经过查询，是loading造成的，将loading去掉或者提前即可。

修改后的代码：

infoChange() {
      if (this.info.id) {
        this.loading= true;
        var param = {
          id: this.info.id
        }
        getList(param).then(res => {
          this.info.list = res.rows; 
          //整理格式...一顿数据操作，这里忽略
          if (this.info.list && this.info.list.length > 0) {
           
            this.loading= false; //!!!!!!!!!!!!将loading提前!!!!!!!!!!!!!

            //TODO 数据选择后回显
            this.$refs.multipleTable.clearSelection()
              var numbers = this.info.changeNumbers.split(',');
              if (numbers && numbers.length > 0) {
                numbers.forEach(item => { //numbers：选择行的不重复的字段，比如主键
                  this.info.list.forEach(row => {// this.info.list：table中绑定的参数
                    if (item == row.assetNumber) {
                      //table数据回显
                      this.$nextTick(() => {
                        //multipleTable：table的ref定义名
                        this.$refs.multipleTable.toggleRowSelection(row, true);
                      });
                    }
                  });
                })
              }

          }
        }).catch(() => {
          this.loading= false;
        });
      }
    },

得到想要的效果：