做项目的时候,会经常用到表格，此次是需要用到多级表头和表格合并,特此记录,以备后来查看
1.初始效果（已加居中效果）
2.结构 （第一个是单独的el-table-column，第二个是一个el-table-column里包着一个el-table-column，第三个是一个el-table-column包着是三个el-table-column，其他的以此类推）
<template>
<div class="TableShows">
<el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod" :cell-style="rowStyle">
<!-- 日期 -->
<el-table-column prop="date" label="日期" width="110" align="center">
</el-table-column>
<!-- 商户号 -->
<el-table-column width="120">
<el-table-column prop="name" label="商户号账号" width="110" align="center">
</el-table-column>
</el-table-column>
<!-- 恒优惠 -->
<el-table-column label="恒优惠商户号余额(前一天17.00获取虚拟账户余额）" align="center">
<el-table-column prop="province" label="上期期末余额" width="120" align="center">
</el-table-column>
<el-table-column prop="city" label="进账金额" width="120" align="center">
</el-table-column>
<el-table-column prop="address" label="转账金额" width="120" align="center">
</el-table-column>
</el-table-column>
<!-- 期末余额 -->
<el-table-column width="120">
<el-table-column prop="name" label="期末余额" width="110" align="center">
</el-table-column>
</el-table-column>
<!-- 省心系统 -->
<el-table-column prop="name" label="省心系统期末余额(0点获取)" width="120" align="center">
</el-table-column>
<!-- 省心流水 -->
<el-table-column prop="name" label="省心当日流水订单" width="120" align="center">
</el-table-column>
<!-- 手续费 -->
<el-table-column width="110" label="手续费(根据订单量计算)" align="center">
<el-table-column prop="name" label="高德订单手续费(0.6%)" width="110" align="center">
</el-table-column>
<el-table-column prop="name" label="腾讯订单手续费(0.72%)" width="110" align="center">
</el-table-column>
<el-table-column prop="name" label="PP停车(0.22%)" width="110" align="center" >
</el-table-column>
</el-table-column>
<!-- 总账 -->
<el-table-column width="200">
<el-table-column prop="name" label="总账金额 富民商户号期末金额+省心期末余额+省心当日流水订单" width="200" align="center">
</el-table-column>
</el-table-column>
<!-- 进账差异 -->
<el-table-column width="150">
<el-table-column prop="name" label="进账差异(进账金额+手续费+转账)" width="150" align="center">
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>3.数据&&方法
过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
<script>
export default {
name: "groupOfCustomers",
data() {
return {
tableData: [//数据源
{
date: '3月8号',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '3月8号',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '3月9号',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},
{
date: '3月10号',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
]
};
},
methods: {
// 表格居中
rowStyle() {
return "text-align:center";
},
// 表格合并,需要合并的地方是第7列到第12列的第1行,数组下标是从0开始,所以行是0开始算,列是从7列开始算
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 7 || columnIndex === 6 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12) {
if (rowIndex === 0) {
return [2, 1];
} else if (rowIndex === 1) {
return [0, 0];
}
}
},
}
}
</script>4.效果
