element UI el-table 树形表格 懒加载 折叠表格 死循环 id不可重复问题

//template部分
 <el-table 
      ref="schoolTable"
      :data="schoolList" 
       border
      :row-key="onlyId"//指定唯一的key值
       style="width: 100%"
       class="margin-bottom-20"
       v-loading="schoolListLoading"
       lazy//懒加载这个也要配置
       :load="loadTable"//懒加载 点击上一级加载下一级
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//必写属性
       :row-class-name="tableRowClassName"
       >
          <el-table-column align="center" prop="schCategoryName" label="等级">
            <template slot-scope="scope">
              <span v-if="scope.row.schCategoryName">学校</span>
              <span v-else-if="scope.row.gradeName">年级</span>
              <span v-else>班级</span>
            </template>
          </el-table-column>
</el-table>

//script部分
<script>
data () {
return {
  schoolList: [],
  schClassList:[],
 }
},
methods:{
   onlyId (val) {
      return val.id + 'only'
    },
   created () {
    this.getSchoolInfo();

    },

    getSchoolInfo () {
      this.schoolListLoading = true;
      this.listQuery.newUserId = this.userId || this.userInfo.id;
      this.listQuery.regionCode = this.regionId;
      getDataAll("schoolInfo/selectSchoolInfoByUserId", this.listQuery)
        .then(res => {
          this.schoolListLoading = false;
          if (res.data.resultCode === 200) {
            this.schoolList = res.data.resultContent.list;
            this.schoolList.map(i => {
              i.hasChildren = true;
            });
            this.total = res.data.resultContent.total;
          } else {
            this.$message({ message: res.data.resultMsg, type: "error" });
          }
        }).catch(() => {
          this.schoolListLoading = false;
          this.$message({ message: "查询学校信息失败!", type: "error" });
          });
       },
     },

   // 表格数据加载
    loadTable (tree, treeNode, resolve) {
      this.tree = tree;
      this.treeNode = treeNode;
      this.resolve = resolve;
      if (!this.treeIds.includes(tree.id)) {
        this.treeIds.push(tree.id);
      }
      // 点击学校
      if (treeNode.level === 0) {
        this.schGradeList = []
        getDataAll("schoolGrade/selectGradeById", {
          schoolId: tree.id,//请求数据的参数根据自己的情况来
          userId: this.userInfo.id,
          pageNum: 1,
          pageSize: 100
        }).then(res => {
            let data = [];
            if (res.data.resultCode === 200) {
              this.gradeId = tree.id; // 学校id
              data = res.data.resultContent.list;
              data.map((i, index) => {
              // 加一个字符串 只是每一级的字符串不能是一样的就可以了 
              //比如学校加schoolkey 年级加gradekey 班级加classkey
              //如果id重复 他会把当前的id当成父id再去请求下一级
                this.schGradeList.push(i.id)
                i.hasChildren = true;
                i.isLevelUp = 1;
                if (i.id == tree.id) {
                  return data.splice(index, 1);
                }
              });
            } else {
              this.$message({ message: res.data.resultMsg, type: "error" });
            }
            resolve(data);
          }).catch(() => {
            this.$message({ message: "查询年级失败!", type: "error" });
            resolve([]);
          });
      }
        // 点击年级
        else if (treeNode.level === "") {
        this.schClassList = []
        getDataAll("schoolClass/selectClassById", {
          classGradeId: tree.id,
          userId: this.userInfo.id,
          pageNum: 1,
          pageSize: 100
        }).then(res => {
            let data = [];
            if (res.data.resultCode === 200) {
              this.classId = tree.id; // 年级id
              data = res.data.resultContent.list;
              data.map((i, index) => {
                this.schClassList.push(i.id)
                 return data[index].id += "key"
                 //可以加一个key字符串 可以保证id不会跟上级的id一样,如果后面要用到这个id作为参数
                 // 那就把这个字符串截取掉((数据id).toString().replace("key",""))就可以了,template差值表达式里也可以这么写
              });  
            } else {
              this.$message({ message: res.data.resultMsg, type: "error" });
            }
            resolve(data);
          })
          .catch((err) => {
            this.$message({ message: "查询班级失败!", type: "error" });
            resolve([]);
          });
      } else {
        resolve([]);
      }
    }
</script>








  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值