项目开发用的是element-ui，
table合并经常会被用到，
但table合并实在是令人头疼。（可能是我找不到正确的文档）
网上找到的教程基本上是设定一个全局的spanArr和pos去记录，可能创造者写的没什么问题，但后面的人抄来抄去，到读者手上的时候已经是非人类可以看懂的代码了，给开发带来了很多不必要的麻烦。
以下代码可直接运行，大家需要的话就复制去试一下，希望可以帮到您。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="amount1" sortable label="数值 1">
</el-table-column>
<el-table-column prop="amount2" sortable label="数值 2">
</el-table-column>
<el-table-column prop="amount3" sortable label="数值 3">
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '234',
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: '621',
amount2: '4.1',
amount3: 15
}]
}
},
mounted() {
this.tableData.forEach((item, index) => {
if (index === this.tableData.length - 1) {
this.setTableRowAndCol(this.tableData, ['name', 'amount1'])
}
})
},
methods: {
setTableRowAndCol(tableData, fieldArr) {
let lastItem = {}
fieldArr.forEach((field, index) => {
tableData.forEach(row => {
row.mergeCellName = fieldArr;
const rowSpan = `rowspan_${field}`;
if (fieldArr.slice(0, index + 1).every(e => lastItem[e] === row[e])) {
row[rowSpan] = 0;
lastItem[rowSpan] += 1
} else {
row[rowSpan] = 1;
lastItem = row
}
})
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.mergeCellName.includes(column.property)) {
const rowspan = row[`rowspan_${column.property}`]
if (rowspan) {
return {
rowspan: rowspan,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
})
</script>
</html>Ï
版权声明：本文为weixin_41198447原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。