el-table懒加载分类解决方案

res.data为所有分类数据 主要字段为id,pid,name

let childTableData=[] //(以所有数据的pid为键  值为pid=该pid的数组)
for (var i in res.data) {
   
  if (!childTableData.hasOwnProperty(res.data[i].pid)) {
   
    childTableData[res.data[i].pid] = []
  }
  childTableData[res.data[i].pid].push({
   
    "id": res.data[i].id,
    "pid": res.data[i].pid,
    "name": res.data[i].name,
    "level": res.data[i].level,
    "sort": res.data[i].sort,
    "is_show": res.data[i].is_show,
    "image": res.data[i].image,
    "trash": res.data[i].trash,
    "is_hot": res.data[i].is_hot,
    hasChildren: true
  })
}
//为数据增加hasChildren字段方便el-table识别是否有子分类
function manageHasChildren(childTableData) {
   
  for (var i in childTableData) {
   
      if (childTableData.hasOwnProperty(i) && childTableData[i].length > 0) {
   
        childTableData[i].map((row,index)=>{
   
        if (childTableData[row.id]!==undefined&&childTableData[row.id].length > 0) {
   
          childTableData[i][index].hasChildren = true
          manageHasChildren(childTableData[row.id])
        } else {
   
         childTableData[i][index].hasChildren = false
        }
      })
      }
    }
  return childTableData;
}
tableData = childTableData[0]
将tableData与childTableData传入子组件

最后结果类似于:
0: (4) [{…}, {…}, {…}, {…}, ob: Observer]
1424: (5) [{…}, {…}, {…}, {…}, {…}, ob: Observer]
1426: (5) [{…}, {…}, {…}, {…}, {…}, ob: Observer]
1427: (5) [{…}, {…}, {…}, {…}, {…}, ob: Observer]
1444: (3) [{…}, {…}, {…}, ob: Observer]

<template>
  <div>
    <template>
      <el-row style="text-align: left" :gutter="5">
        <el-form :inline="true" size="mini">
          <el-col :span="6">
            <el-form-item>
              <el-button
                      type="primary"
                      icon="el-icon-plus"
                      size="mini"
                      @click="handleManage('','add')"
              >新增类目
              </el-button>
              <el-button type="success" icon="el-icon-refresh" size="mini" @click="refresh">刷新表格</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="5" style="text-align:left">
        <el-form :inline="true">
          <el-col :span="12">
            <el-form-item>
              <el-button
                      style="display:inline-block"
                      type="warning"
                      size="mini"
                      :disabled="multipleSelection.length === 0"
                      @click="handleUpdateUrl()"
              >更新选中的商品分类链接
              </el-button>
              <el-button
                      style="display:inline-block"
                      type
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值