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

最新推荐文章于 2025-05-20 17:52:43 发布

原创

最新推荐文章于 2025-05-20 17:52:43 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#php #vue.js

本文探讨了如何使用Vue.js和el-table组件实现分类数据的懒加载。内容涉及处理不同分类ID下的数据加载，如1424、1426、1427和1444等，每个分类包含多个条目，通过优化加载策略提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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=