elementUI表格，动态加载（后台获取）表格复选框

动态加载表格复选框

element文档中有相关函数用来修改表格行的复选状态：

遇到问题

最开始想直接使用这个函数来修改复选框的状态，仿照官方例子：

但是当我再method钩子函数中直接调用this.toggleSelection([tableData[1], tableData[2]])时报错：tableData未定义，猜测应该是异步加载数据还未完成但已经执行该函数，查阅一堆资料后发现用vue的nextTick可以解决这类异步加载数据渲染DOM顺序的问题。

最终

      searchEquipment: function (data) {
        if (data === null) {
          this.queryEquipmentForm.page = 1
        }
        this.$api.equipment.findPage(this.queryEquipmentForm).then((resp) => {
          this.tableData = resp.data.content //后台数据得到的返回的数据结果集
          // let list = [tableData[2], tableData[4]]
          // list.forEach(list => {
          //   this.$refs.multipleTable.toggleRowSelection(list);
          // })
          for (let i = 0; i < this.tableData.length; i++){
            if(this.tableData[i].state === '0') {
              this.tableData[i].state = '离线'
            } else {
              this.tableData[i].state = '在线'
            }
          }
          console.log(this.tableData)
          for (var i = 0; i <this.tableData.length; i++) { // this.queryForm.pageSize  有问题（会出现pagesize大于实际有的数据条数 导致error）
            // this.tableData[i].intoTime = this.timeCycle(this.tableData[i].intoTime)//对于日期格式的转换
            if(this.tableData[i].lastonlinetime!=null){
              this.tableData[i].lastonlinetime= this.timeCycle(this.tableData[i].lastonlinetime)//对于日期格式的转换
            }
          }
          this.queryEquipmentForm.totalSize =resp.data.totalSize


		//前面的没啥用===========================================


          //数据勾选动态加载
          for(let i = 0;i < this.tableData.length;i++){
            if(this.tableData[i].extstr7 == 0 ){
           // extstr7 为存储勾选状态字段
              this.$nextTick( ()=> {
                this.$refs.multipleTable.toggleRowSelection(this.tableData[i],true);
              })
            }
          };

        }).catch(() => {
          console.log(error)
        })
      },