效果图：点击某行数据展开另一个嵌套在里面的table
核心代码：
从后台请求的数据格式：
代码实现：
<template>
<div>
<div class="assetnum">
<div class="assetbox br pr30">
<div class="assettitle">
<span>
已发现资产（数量：
<strong>{{tableData2.length}}</strong>）
</span>
</div>
<div class="mytable">
<el-table ref="table2" :data="tableData2" style="width: 100%">
<el-table-column width="50">
<template slot-scope="scope">
<i class="iconfont icon-tubiaozhizuomoban" @click="toogleExpand2(scope.row)"></i>
</template>
</el-table-column>
<el-table-column class="sectable" prop="items" type="expand" width="1">
<template slot-scope="scope">
<el-table :data="scope.row.items" stripe style="width: 100%">
<el-table-column type="index"></el-table-column>
<el-table-column prop="port" label="端口"></el-table-column>
<el-table-column prop="protocol" label="协议"></el-table-column>
<el-table-column prop="service" label="服务"></el-table-column>
<el-table-column prop="software" label="软件"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="IP" prop="ip">
<template slot-scope="scope">
<span class="ipbtn">IP</span>
{{scope.row.ip}}
</template>
</el-table-column>
<el-table-column label="资产类型" prop="catagory">
<template slot-scope="scope">
<span v-if="scope.row.catagory=='host'">
<i class="iconfont icon-zhuji1"></i>
</span>
<span v-if="scope.row.catagory=='db'">
<i class="iconfont icon-weibiaoti-database"></i>
</span>
{{scope.row.catagory}}
</template>
</el-table-column>
<el-table-column label="标准系统" prop="type">
<template slot-scope="scope">
<span v-if="scope.row.type=='windows'">
<img src="../../../../assets/img/windows.png" alt />
</span>
<span v-if="scope.row.type=='RedHat'">
<img src="../../../../assets/img/redhat.png" alt />
</span>
<span v-if="scope.row.type=='mysql'">
<img src="../../../../assets/img/Oracle.png" alt />
</span>
<span v-if="scope.row.type=='CentOS'">
<img src="../../../../assets/img/centos.png" alt />
</span>
{{scope.row.type}}
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="assetbox pl30">
<div class="assettitle">
<span>
不存活资产（数量：
<strong>{{tableData3.length}}</strong>）
</span>
</div>
<div class="mytable">
<el-table ref="table" :data="tableData3" style="width: 100%">
<el-table-column width="50">
<template slot-scope="scope">
<i class="iconfont icon-tubiaozhizuomoban" @click="toogleExpand(scope.row)"></i>
</template>
</el-table-column>
<el-table-column class="sectable" type="expand" width="1">
<template>
<el-table :data="tableData3.items" stripe style="width: 100%">
<el-table-column type="index"></el-table-column>
<el-table-column prop="port" label="端口"></el-table-column>
<el-table-column prop="xy" label="协议"></el-table-column>
<el-table-column prop="server" label="服务"></el-table-column>
<el-table-column prop="software" label="软件"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="IP" prop="ip">
<template slot-scope="scope">
<span class="ipbtn">IP</span>
{{scope.row.ip}}
</template>
</el-table-column>
<el-table-column label="资产类型" prop="catagory">
<template slot-scope="scope">
<span v-if="scope.row.catagory=='host'">
<i class="iconfont icon-zhuji1"></i>
</span>
<span v-if="scope.row.catagory=='db'">
<i class="iconfont icon-weibiaoti-database"></i>
</span>
{{scope.row.catagory}}
</template>
</el-table-column>
<el-table-column label="标准系统" prop="type">
<template slot-scope="scope">
<span v-if="scope.row.type=='windows'">
<img src="../../../../assets/img/windows.png" alt />
</span>
<span v-if="scope.row.type=='RedHat'">
<img src="../../../../assets/img/redhat.png" alt />
</span>
<span v-if="scope.row.type=='Oracle'">
<img src="../../../../assets/img/Oracle.png" alt />
</span>
<span v-if="scope.row.type=='CentOS'">
<img src="../../../../assets/img/centos.png" alt />
</span>
{{scope.row.type}}
</template>
</el-table-column>
</el-table>
</div>
</div>
<div></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value2: [],
value3: [],
tableData2: [],
tableData3: [],
};
},
activated() {
this.getDataList();
},
methods: {
toogleExpand(row) {
let $table = this.$refs.table;
$table.toggleRowExpansion(row);
},
toogleExpand2(row) {
let $table = this.$refs.table2;
$table.toggleRowExpansion(row);
console.log(this.$route.params.taskId)
},
getDataList(){
//获取上一层页面点击要查看的任务ID
var ids = this.$route.params.taskId;
//发送请求给后台
this.$http({
url: this.$http.adornUrl("/ads/task/detail"),
method: "get",
params: this.$http.adornParams({
taskId: ids
})
}).then(({ data }) => {
if (data && data.code === 0) {
let arr1 = data.data;
let hadData = [];
let noData = [];
//对获取的数据利用status判断进行分类，再放进两个不同的数组中
arr1.map(function(item,index){
if(item.status == 1){
hadData.push(item)
}else{
noData.push(item)
}
})
//赋值给已发现资产
this.tableData2 = hadData ;
//赋值给不存活资产
this.tableData3 = noData ;
console.log(this.tableData2)
} else {
}
});
}
}
};
</script>