<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<style lang="scss" scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
.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>
</head>
<body>
<div id="app">
<template>
<div class="report-forms-page">
<div class="report-forms-main">
<div class="bottomForm">
<div style="margin-top:12px">
<el-table :data="tableData" :height=2000
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>
</div>
<script>
var Main = {
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]
}
}
},
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>
2022-04-24 Vue Element表格嵌套
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- MyTable.vue MyColumn.vue 使用 预览地址：https://jsfiddle.net/mmx...
- 在使用element UI 碰到一个需求 就是在表格中需要有一个按钮 点击按钮弹出弹框 弹框里再嵌套表格 如图： ...
