/////////////////////////// 代碼如下
<template>
<div class="report-forms-page">
<div class="report-forms-main">
<div class="bottomForm">
<div style="margin-top:12px">
<el-table
:data="tableData"
:height=reportTableConfig.tableHeight
style="width: 100%;margin-bottom: 20px;"
:span-method="arraySpanMethod"
row-key="id"
border
stripe
>
<!-- 二級箱 -->
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:data="props.row.datas"
style="width: 100%;"
:span-method="arraySpanMethod"
row-key="id"
border
stripe
>
<!-- 三級箱 -->
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:data="props.row.datas"
style="width: 100%;"
row-key="id"
border
stripe
>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="number" label="編號"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="name" label="表箱名稱"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="所屬台區"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="所屬配變"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="維護班組"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="運維單位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="低壓用戶數"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="城農網"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="地區特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="可開放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="額定容量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="id" label="ID"
width="90"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="date" label="分支箱名稱"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="type" label="所屬台區"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="所屬配變"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="維護班組"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="status"
label="運維單位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="表箱數"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="城農網"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="地區特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="可開放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age"
label="額定容量"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="applyNo" label="配變名稱"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="name" label="所屬線路"
width="180"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="address"
label="所屬變電站"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="維護班組"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="運維單位"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="公專變"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="城農網"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="地區特征"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="可開放容量"></el-table-column>
<el-table-column align='center' :show-overflow-tooltip="true" prop="age" label="額定容量"></el-table-column>
<el-table-column label="操作" width="120">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
filterText: '',
keyWord: '',
//////////////////////-------------------
tableData: [
{
id: 1,
applyNo: '202004291234',
name: '李四',
address: '上海市普陀區金沙江路 1518 弄',
datas: [
{
id: 31,
date: '2016-05-01',
type: '類型1',
status: '已發貨',
datas: [
{
id: 1,
number: '2021-04-01',
name: 'name1',
age: '17'
},
{
id: 2,
number: '2021-05-01',
name: 'name2',
age: '18'
}
]
},
{
id: 32,
date: '2016-05-02',
type: '類型2',
status: '未發貨'
}
]
},
{
id: 2,
applyNo: '202004291235',
name: '張三',
address: '上海市普陀區金沙江路 1517 弄'
},
{
id: 4,
applyNo: '202004291238',
name: '趙6六',
address: '上海市普陀區金沙江路 1516 弄'
}
],
radio: 'today',
}
},
created() {
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (!row.datas) {
if (columnIndex === 0) {
console.log(row)
// return [0, 0]
return [0, 0]
} else if (columnIndex === 1) {
// return [1, 2]
return [1, 2]
}
}
},
},
}
</script>
<style lang="scss" scoped>
.report-forms-page {
height: calc(100vh - 84px);
position: relative;
left: 10px;
.report-org-tree {
position: absolute;
margin-top: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
background-color: #ffffff;
width: 340px;
height: calc(100% - 25px);
border-radius: 0.5rem;
.search {
padding: 10px;
}
.title {
color: #000;
font-size: 16px;
padding: 10px;
padding-top: 0;
font-weight: bold;
}
.tree {
padding: 10px;
height: calc(100% - 70px);
overflow: auto;
background-color: #ffffff;
}
}
.report-forms-main {
position: absolute;
top: 1.25%;
right: 1%;
padding: 1% 0.5% 0 0.5%;
width: calc(98.8% - 345px);
height: 97%;
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
.el-col-lg-4-8 {
width: 20% !important;
.timePeriod {
width: 45%;
display: inline-block;
}
}
}
}
</style>