el-table嵌套el-table

1、样式

ref="multipleTable"

:data="tableData"

tooltip-effect="dark"

style="width: 100%; border: 1px solid #21f3ef"

:border="true"

:row-class-name="tableRowClassName"

:header-cell-style="headerStyle"

:highlight-current-row="false"

height="800"

>

prop="areaName"

label="景区名称"

width="260"

align="center"

>

prop="dataTotal"

label="数据采集总量"

width="260"

align="center"

>

2、接口

{

areaName: "",

carCount: '',

carPhotoCount: "",

dataTotal: "",

facePhotoCount: "",

notStructuringTotal: "",

scenicArchivesCount: "",

scenicFireCount: "",

scenicPersonCount: "",

scenicPlaceCount: "",

structuringTotal: "",

}

3、接口添加数组

statisticsTime(this.statisticsData).then((res) => {

console.log(res);

console.log(res.data.data.records);

let a = res.data.data.records;

let newArr = [];

a.map((item, index) => {

console.log(index);

newArr.push(

Object.assign(

item,

{

jiegou: [

{

PortraitCapture: item.facePhotoCount,

CarSnapshot: item.carPhotoCount,

},

],

},

{

feijiegou: [

{

person: item.scenicPersonCount,

car: item.carCount,

trade: item.scenicPlaceCount,

event: item.scenicArchivesCount,

fireEquipment: item.scenicFireCount,

punishInfo: item.scenicArchivesCount,

},

],

}

)

);

console.log(newArr);

});

this.tableData = newArr;

});

4、接口现在数据格式

{

areaName: "D",

carCount: 25,

carPhotoCount: 10,

dataTotal: 666,

facePhotoCount: 10,

jiegou: [{ PortraitCapture: 19, CarSnapshot: 20 }],

feijiegou: [

{

person: 11,

car: 11,

trade: 11,

event: 11,

fireEquipment: 11,

punishInfo: 11,

},

],

notStructuringTotal: 10,

scenicArchivesCount: 0,

scenicFireCount: 0,

scenicPersonCount: 0,

scenicPlaceCount: 0,

structuringTotal: 0,

},

5、清除bioageqiantaobiaoge