一趁曼、功能
1军浆、合并行
2、循環(huán)列
備注：數(shù)組第一層某些字段公用（depart_id挡闰，depart_name）乒融、team是數(shù)組第二層公用的多行數(shù)據(jù)
二、原理：判斷原數(shù)組team的長度摄悯，保持每一行中的team長度不超過1赞季，多出來的拆開，為單獨行奢驯，最后再進行合并
getSpanArr(data)方法 data就是我們從后臺拿到的數(shù)據(jù)申钩，通常是一個數(shù)組；
spanArr是一個空的數(shù)組瘪阁，用于存放每一行記錄的合并數(shù)撒遣；
pos是spanArr的索引。
如果是第一條記錄（索引為0）罗洗，向數(shù)組中加入１愉舔，并設(shè)置索引位置；
如果不是第一條記錄伙菜，則判斷它與前一條記錄是否相等轩缤，
如果相等，則向spanArr中添入元素0贩绕，并將前一位元素＋１火的，表示合并行數(shù)＋１，
以此往復(fù)淑倾，得到所有行的合并數(shù)馏鹤，0即表示該行不顯示
image.png
image.png
頁面顯示結(jié)果
image.png
接下來是我示例中的數(shù)據(jù)格式
[
{
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: "網(wǎng)絡(luò)部",
team: [
{
team_id: 25,
team_name: "網(wǎng)絡(luò)團隊",
lines: [
{
service_line: "網(wǎng)絡(luò)1",
cost_type0: 0,
cost_type1: 0,
sum: 0
},
{
service_line: "網(wǎng)絡(luò)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>
三、結(jié)語
今天又是勵志做好碼農(nóng)的一天娇哆，fightingＥ壤邸！碍讨！
簡單的行合并治力，請看上一篇http://www.reibang.com/p/6067708bd1ee
