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