Element-UItablespan-method（⾏合并）的实现
官⽹解释：通过给table传⼊span-method⽅法可以实现合并⾏或列，⽅法的参数是⼀个对象，⾥⾯包含当前⾏row、当前列column、当前⾏号rowIndex、当前列号columnIndex四个属性。该函数可以返回⼀个包含两个元素的数组，第⼀个元素代表rowspan，第⼆个元素代表colspan。 也可以返回⼀个键名为rowspan和colspan的对象。
这个显然不能满⾜项⽬开发需求，所以需要略作修改！
如下图，类似这样的合并应该才是⼯作中项⽬需要的：
实现⽅式（直接上代码）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>element-table</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="unpkg/element-ui@2.11.1/lib/theme-chalk/index.css">
<script src="unpkg/vue/dist/vue.js"></script>
<script src="unpkg/element-ui@2.11.1/lib/index.js"></script>
</head>
<body>
<div id="app">
<template>
<div>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
>
<el-table-column
prop="id"
label="ID"
width="180">js合并两个数组
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
</div>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
tableData: [{
id: '12987122',
name: '王⼩虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王⼩虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王⼩虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王⼩虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王⼩虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
mergeSpanArr: [], // 空数组，记录每⼀⾏的合并数
mergeSpanArrIndex: '' // mergeSpanArr的索引
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {            if (columnIndex === 0) { // 设置需要合并的列（索引）
if (rowIndex % 2 === 0) { // 设置合并多少⾏
return {
rowspan: 2, // 需要合并的⾏数
colspan: 1 // 需要合并的列数，设置为0，不显⽰该列
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 1) { // 合并第⼆列所有⾏
const _row = SpanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
// ⽣成⼀个与⾏数相同的数组，记录每⼀⾏设置的合并数
setMergeArr (data) {　
for (var i = 0; i < data.length; i++) {
if (i === 0) {
} else {
// 判断当前元素与上⼀个元素是否相同
if (data[i].name === data[i - 1].name) {
} else {
}
}
}
// 如果第⼀条记录索引为0，向数组中push 1，设置索引值
// 如果不是第⼀条记录，判断与前⼀条记录是否相等，相等则向mergeSpanArr添加元素0              // 且将前⼀条记录+1，即需要合并的⾏数+1，直到得到所有需要合并的⾏数
}
},
mounted () {
this.setMergeArr(this.tableData)
}
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。