之前用element写页面都是写的一级表头，今天后台让写一个多级表头的页面，刚开始也很蒙。后来发现element官网中有教学，于是就做出了下面这样的效果
其实思路很简单， 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
下面是代码
<el-table
:data="rows"
border
style="width: 100%">
<!-- 收费方式名称 -->
<el-table-column
prop="Name"
width="70"
label="收费方式名称">
</el-table-column>
<!-- 停车费 -->
<el-table-column
label="停车费">
<el-table-column
label="按次">
<el-table-column
prop="PerTimesPark"
width="50"
label="每次停车">
</el-table-column>
<el-table-column
prop="NightPark"
width="50"
label="过夜停车">
</el-table-column>
</el-table-column>
<el-table-column
label="按时收费/按时收费A/按段循环收费">
<el-table-column
prop="LimitMoney"
width="50"
label="每日限额">
</el-table-column>
<el-table-column
prop="FirstParkTime"
width="70"
label="首段停车(分钟)">
</el-table-column>
<el-table-column
prop="FirstParkMoney"
width="70"
label="首段停车(元)">
</el-table-column>
<el-table-column
prop="IntervalParkTime"
width="70"
label="间隔停车(分钟)">
</el-table-column>
<el-table-column
prop="IntervalParkMoney"
width="70"
label="间隔停车(元)">
</el-table-column>
</el-table-column>
<el-table-column
label="按时间段收费/按时间段收费A">
<el-table-column
prop="LimitMoney"
width="50"
label="每日限额">
</el-table-column>
<el-table-column
prop="FreeTime"
width="60"
label="免费停车时间">
</el-table-column>
<el-table-column
prop="TimeSegS"
width="135"
label="收费时间段起">
<template slot-scope="scope">
<span>{{ scope.row.TimeSegS | DateFilter}}</span>
</template>
</el-table-column>
<el-table-column
prop="TimeSegE"
width="135"
label="收集时间段止">
<template slot-scope="scope">
<span>{{ scope.row.TimeSegE | DateFilter}}</span>
</template>
</el-table-column>
<el-table-column
prop="InTimeSegMoney"
width="50"
label="段内停车(元)">
</el-table-column>
<el-table-column
prop="OutTimeSegMoney"
width="50"
label="段外停车(元)">
</el-table-column>
<el-table-column
prop="InFirstParkTime"
width="60"
label="段内首段停车(分钟)">
</el-table-column>
<el-table-column
prop="InFirstParkMoney"
width="60"
label="段内首段停车(元)">
</el-table-column>
<el-table-column
prop="InIntervalParkTime"
width="60"
label="段内间隔停车(分钟)">
</el-table-column>
<el-table-column
prop="InIntervalParkMoney"
width="60"
label="段内间隔停车(元)">
</el-table-column>
<el-table-column
prop="OutFirstParkTime"
width="60"
label="段外首段停车(分钟)">
</el-table-column>
<el-table-column
prop="OutFirstParkMoney"
width="60"
label="段外首段停车(元)">
</el-table-column>
<el-table-column
prop="OutIntervalParkTime"
width="60"
label="段外间隔停车(分钟)">
</el-table-column>
<el-table-column
prop="OutIntervalParkMoney"
width="60"
label="段外间隔停车(元)">
</el-table-column>
</el-table-column>
</el-table-column>
<!-- 交易费 -->
<el-table-column
label="交易费">
<el-table-column
label="按单位循环收费">
<el-table-column
prop="PerWeight"
width="70"
label="交易费按单位循环收费重量(千克)">
</el-table-column>
<el-table-column
prop="PerFee"
width="70"
label="交易费按单位循环收费金额(元)">
</el-table-column>
</el-table-column>
<el-table-column
label="按次收费">
<el-table-column
prop="PerTradeFee"
width="70"
label="交易费按次收费金额(元)">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>也很简单。
