前端骚操作,按需渲染table

 getList() {

      this.loading = true;

      listEquipmentManagement(this.queryParams).then((response) => {

        let data = response.rows;

        Promise.all(

          data.map((item) => {

            return getClass(item.classId).then((res) => {

              if (res.data && res.data.className) {

                this.$set(

                  item,

                  "className",

                  res.data.grade + res.data.className

                ); // 使用 Vue.set

              } else {

                this.$set(item, "className", "未知学校"); // 默认值

              }

            });

          })

        ).then(() => {

          console.log("data", data); // 检查数据

          this.equipmentManagementList = response.rows;

          this.total = response.total;

          this.loading = false;

        });

        // this.equipmentManagementList = response.rows;

        // this.total = response.total;

        // this.loading = false;

      });

    },

上面代码是为了满足要求,我的需求是去动态渲染某个表格的数据到当前表格，下面贴上截图,表达清楚需求。

说的是这个班级ID的选项,这里用了联想功能的下拉框添加,最后添加的是classId,而classId是从班级管理这张表来的。

所以如果请求的话,数据太多,然后需要999的参数去请求，并且大数据模型下还不够,所以写了上述代码，可以根据需求去请求获取每个的详细信息,因为一个年级有好多班级,然后可以在添加一个className属性,将年级和班级拼接上去,直接在html里面渲染

     <el-table-column label="设备ID" align="center" prop="classId">

        <template slot-scope="scope">

          <span>{{ scope.row.className }}</span>

        </template>

      </el-table-column>

这样比较节省带宽,等于说只需要请求对应表格条数的相应接口就可以了。