一、功能
1、合并行
2、循环列
备注：数组第一层某些字段公用（depart_id，depart_name）、team是数组第二层公用的多行数据
二、原理：判断原数组team的长度，保持每一行中的team长度不超过1，多出来的拆开，为单独行，最后再进行合并
getSpanArr(data)方法 data就是我们从后台拿到的数据，通常是一个数组；
spanArr是一个空的数组，用于存放每一行记录的合并数；
pos是spanArr的索引。
如果是第一条记录（索引为0），向数组中加入１，并设置索引位置；
如果不是第一条记录，则判断它与前一条记录是否相等，
如果相等，则向spanArr中添入元素0，并将前一位元素＋１，表示合并行数＋１，
以此往复，得到所有行的合并数，0即表示该行不显示
image.png
image.png
页面显示结果
image.png
接下来是我示例中的数据格式
[
{
depart_id: " ",
depart_name: " ",
team: [
{
team_id: " ",
team_name: "",
lines: [
{
service_line: "-",
cost_type0: 0,
cost_type1: 0,
sum: 0
}
]
}
]
}
]
示例代码
<template>
<div style="padding:20px">
<el-table ref="refTable" :data="list" :header-row-class-name="'table_header'" style="width: 100%" :header-cell-style="{background:'#F2F2F2',color:'#333'}" border :span-method="dataSpanMethod">
<el-table-column show-overflow-tooltip prop="depart_name" label="部门名称" min-width="100"></el-table-column>
<el-table-column v-for="(item, index) in columnList" :key="index" :label="item" min-width="80" show-overflow-tooltip>
<template slot-scope="scope">
<div v-for="(val,index2) in scope.row.team" :key="index2">
<div v-if="item=='团队名称'">{{val.team_name}}</div>
<div v-for="(val3,index3) in val.lines" :key="index3">
<div v-if="item=='销售线'">{{val3.service_line}}</div>
<div v-if="item=='办公费'">{{val3.cost_type0}}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="费用合计" width="80" fixed="right">
<template slot-scope="scope">
<div v-for="(val,index2) in scope.row.team" :key="index2">
<div v-for="(val3,index3) in val.lines" :key="index3">{{val3.sum}}</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
columnList: [
'团队名称',
"销售线",
"办公费",
],
spanArr:[],
};
},
created() {
this.getList();
},
methods: {
getList() {
this.list = [
{
depart_id: 1,
depart_name: " 总部",
team: [
{
team_id: 20,
team_name: " 总部",
lines: [
{
service_line: "-",
cost_type0: 0,
cost_type1: 0,
sum: 0
}
]
}
]
},
{
depart_id: 9,
depart_name: "销售部",
team: [
{
team_id: 21,
team_name: "销售团队1",
lines: [
{
service_line: "销售1",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
{
service_line: "销售2",
cost_type0: 0,
cost_type1: 0,
sum: 0
}
]
},
{
team_id: 22,
team_name: "销售团队2",
lines: [
{
service_line: "销售1",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
{
service_line: "销售2",
cost_type0: 0,
cost_type1: 0,
sum: 0
}
]
},
{
team_id: 23,
team_name: "销售团队3",
lines: [
{
service_line: "销售1",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
{
service_line: "销售2",
cost_type0: 0,
cost_type1: 0,
sum: 0
}
]
}
]
},
{
depart_id: 10,
depart_name: "网络部",
team: [
{
team_id: 25,
team_name: "网络团队",
lines: [
{
service_line: "网络1",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
{
service_line: "网络2",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
]
}
]
}
];
this.getData();
},
getData() {
let arr = this.list;
let str = [];
let newArr = [];
arr.filter((value, index, array) => {
if (value.team.length > 1 && value.team.length != 0) {
for (let j = 0; j < value.team.length; j++) {
var db = {
depart_id: value.depart_id,
depart_name: value.depart_name,
team: [value.team[j]]
};
str.push(db);
}
value.team = [];
arr.splice(index, 1);
arr.splice(index, 0, ...str);
newArr = str;
} else {
newArr = arr;
}
});
this.$set(this, "list", newArr);
this.getSpanArr(newArr);
},
getSpanArr(data) {
this.spanArr = [];
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
if (data[i].depart_name === data[i - 1].depart_name) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
dataSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {//合并行的行为只在第一列进行
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}
}
};
</script>
三、结语
今天又是励志做好码农的一天，fighting！！！
简单的行合并，请看上一篇https://www.jianshu.com/p/6067708bd1ee
