渲染表格数据，渲染到页面是一个个出来的，如何整体渲染或者优化？

Question

问题补充：接口返回数据是先返回第一列数据，在通过第一列数据的objec_id再去循环获取其它列，不使用this.$set会出现有数据页面不渲染的情况
相关代码如下：

async getTableInfo () {

  // 电站列表第一列
  let res = await this.$api.selectObjectInfopage({ name: this.power_name == '' ? undefined : this.power_name });
  this.RoleData = res.data;
  for (let itm of res.data) {

    this.$api.machineCol({ list: itm.object_id }).then(res1 => {
      // itm.zhuangji = res1.data && res1.data[0].zjValue
      this.$set(itm, 'zhuangji', res1?.data && res1?.data[0]?.zjValue)
    })
    this.$api.getPowwerStatus({ list: itm.object_code }).then(res3 => {
      console.log('res3', res3);
      let value = res3?.data && res3?.data[0].value
      console.log('666', value);
      // 离线
      if (!(+value)) {
        this.$set(itm, 'statusStr', '0.0')
      } else {
        this.$set(itm, 'statusStr', '1.0')
      }

      // if (value === '1.0') {
      //   // itm.statusStr = '正常'
      //   this.$set(itm, 'statusStr', '正常')
      // } else {
      //   // itm.statusStr = '离线'
      //   this.$set(itm, 'statusStr', '离线')
      // }
    })

    this.$api.othersCol({ list: itm.object_code }).then(res2 => {
      console.log('res11', res);
      res2?.data?.forEach(itm2 => {
        console.log('itm2', itm2);
        // itm.PVDailyPowerGeneration = itm2.PVDailyPowerGeneration
        // itm.DailyEquivalentUtilizationHours = itm2.DailyEquivalentUtilizationHours
        // itm.PVActivePower = itm2.PVActivePower
        this.$set(itm, 'PVDailyPowerGeneration', itm2.PVDailyPowerGeneration)
        this.$set(itm, 'DailyEquivalentUtilizationHours', itm2.DailyEquivalentUtilizationHours)
        this.$set(itm, 'PVActivePower', itm2.PVActivePower)
      })
      // this.RoleData = res.data;
    })

    this.getAlarmInfo(itm.object_id, () => {
      itm.ycnbq = itm.ycnbq || 0
      this.$set(itm, 'ycnbq', ++itm.ycnbq)
      this.$set(itm, 'statusStr', '4.0')
    });
  }


},

async getAlarmInfo (object_id, callback) {

  // 逆变器列表子集
  let res3 = await this.$api.selectObjectInfoList1({ list: object_id });
  console.log("res3", res3);
  this.listParent = [];
  res3.data.map(itm => {
    this.listParent.push(itm.object_id)
  })
  //获取全部逆变器
  let res4 = await this.$api.selectObjectByParentId({ list: this.listParent.toString() })
  console.log('res4', res4);
  await this.getAlarmStatus(res4, callback)
  console.log('count', this.topInfo.alarmTotal);
},
// 获取报警数量
async getAlarmStatus (res, callback) {
  for (let itm of res?.data) {
    let res3 = await this.$api.getAlarmStatus({ list: itm.object_id });
    // 是否为正常
    if (res3?.data.every(itm => +itm.num === 0)) {
      this.$set(itm, 'statusStr', '1.0')
    }
    res3?.data.map(itm1 => {
      console.log('itm1', itm1);
      if (+itm1.num > 0) {
        callback();
      }
    })
  }

Answer 1

this.$set 是全局响应式属性另种写法，它的变更会导致页面重绘。
正确的做法是，在data 定义 响应属性，事件触发，拉取数据，赋值渲染
地址 https://vuejs.org/examples/#f...