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
    评论
展示树状表格可以使用Element UI中的El-table组件,需要设置Row-key和树形结构数据(children)。 1. 设置Row-key 在El-table中,设置Row-key可以帮助组件唯一标识每一行数据,以便在操作表格时更加方便。对于树状表格来说,Row-key需要设置为每个节点的唯一标识,通常是节点的id或者index。 2. 树形结构数据 树形结构数据是指每个节点下面可以有多个子节点,也可以没有子节点。在El-table中,需要将数据转换成树形结构,即每个节点都包含一个children属性,存储该节点下的所有子节点数据。这样,El-table才能正确地展示出树状表格。 实现步骤如下: 1. 定义表格列字段,包括节点名称、节点编号等信息。 2. 将数据转换成树形结构,即每个节点都包含一个children属性,存储该节点下的所有子节点数据。 3. 在El-table中设置Row-key属性,指定每个节点的唯一标识。 4. 在El-table中使用$scopedSlots插槽,可以自定义每个单元格的内容和样式,以展示树状结构。 下面是一个简单的例子,展示如何使用El-table展示树状表格: ``` <template> <el-table :data="treeData" :row-key="rowKey" border> <el-table-column label="节点名称" prop="name" width="180"> <template slot-scope="{ row }"> <span v-if="row.children.length" style="cursor: pointer;" :class="{'is-leaf': row.leaf}" @click="toggleNode(row)"> {{ row.name }} </span> <span v-else>{{ row.name }}</span> </template> </el-table-column> <el-table-column label="节点编号" prop="id" width="180"></el-table-column> <el-table-column label="父节点编号" prop="parentId" width="180"></el-table-column> </el-table> </template> <script> export default { data() { return { treeData: [ { id: 1, name: '节点1', parentId: 0, children: [ { id: 2, name: '节点1-1', parentId: 1, children: [ { id: 3, name: '节点1-1-1', parentId: 2, children: [] } ] }, { id: 4, name: '节点1-2', parentId: 1, children: [] } ] }, { id: 5, name: '节点2', parentId: 0, children: [ { id: 6, name: '节点2-1', parentId: 5, children: [] } ] } ], rowKey: 'id' } }, methods: { toggleNode(row) { row.expanded = !row.expanded } } } </script> ``` 在上面的例子中,我们定义了三个表格列字段,分别是节点名称、节点编号和父节点编号。其中,节点名称这一列使用了$scopedSlots插槽,自定义了单元格展示的内容和样式,以展示树状结构。在数据中,我们将每个节点都转换成了树形结构,即每个节点都包含一个children属性,存储该节点下的所有子节点数据。 在El-table中,我们通过设置Row-key属性,指定了每个节点的唯一标识。同时,我们在$scopedSlots插槽中使用了一个toggleNode方法,用于展开或折叠子节点。 最终,我们可以看到展示出了一个树状结构的表格,每个节点下面都展示了其所有子节点的信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值