el-table嵌套el-table

1、样式

<div class="table" style="display: block">

<el-table

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"

>

<el-table-column

prop="areaName"

label="景区名称"

width="260"

align="center"

>

</el-table-column>

<el-table-column

prop="dataTotal"

label="数据采集总量"

width="260"

align="center"

>

</el-table-column>

<el-table-column label="结构化数据总量" align="center" width="356">

<template slot-scope="scope">

<el-table

:data="scope.row.jiegou"

tooltip-effect="dark"

:header-cell-style="headerStyle2"

:highlight-current-row="false"

style="border: none"

class="customer-table"

>

<el-table-column

prop="PortraitCapture"

label="人像抓拍"

align="center"

>

</el-table-column>

<el-table-column

prop="CarSnapshot"

label="车辆抓拍"

align="center"

>

</el-table-column>

<template slot="append">

{{ scope.row.structuringTotal }}

</template>

</el-table>

</template>

</el-table-column>

<el-table-column width="700" label="非结构化数据总量" align="center">

<template slot-scope="scope">

<el-table

:data="scope.row.feijiegou"

tooltip-effect="dark"

:row-class-name="tableRowClassName"

:header-cell-style="headerStyle2"

:highlight-current-row="false"

class="customer-table"

>

<el-table-column

prop="person"

label="人员"

width="120"

align="center"

>

</el-table-column>

<el-table-column

prop="car"

label="车辆"

width="110"

align="center"

>

</el-table-column>

<el-table-column

prop="trade"

label="行业"

width="110"

align="center"

>

</el-table-column>

<el-table-column

prop="event"

label="按事件"

width="110"

align="center"

>

</el-table-column>

<el-table-column

prop="fireEquipment"

label="消防设备"

width="110"

align="center"

>

</el-table-column>

<el-table-column

prop="punishInfo"

label="处罚信息"

width="118"

align="center"

>

</el-table-column>

<template slot="append">

{{ scope.row.notStructuringTotal }}

</template>

</el-table>

</template>

</el-table-column>

</el-table>

</div>

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