1、定义 table.js
/**
* 生成表格合并行坐标阵列 rowspan、colspan 信息
* @param {表格数据} tableData
* @param {合并列字段} mergeColumns example : ["filed1",[filed2]]
* @returns 坐标阵列
*/
export function getTableSpanMap(tableData, mergeColumns) {
var spanMap = {}
var prevRowMap = {}
mergeColumns = mergeColumns || []
tableData.forEach((row, rowIndex) => {
Object.keys(row).forEach((columnKey, columnIndex) => {
if (!mergeColumns.some(x => x === columnKey)) {
spanMap[rowIndex + '-' + columnIndex] = {
rowspan: 1,
colspan: 1
}
} else {
if (
tableData[rowIndex - 1] &&
tableData[rowIndex][columnKey] == [tableData[rowIndex - 1][columnKey]]
) {
var span = spanMap[prevRowMap[columnIndex] + '-' + columnIndex]
span.rowspan = span.rowspan + 1
span.colspan = 1
spanMap[rowIndex + '-' + columnIndex] = {
rowspan: 0,
colspan: 1
}
} else {
prevRowMap[columnIndex] = rowIndex
spanMap[rowIndex + '-' + columnIndex] = {
rowspan: 1,
colspan: 1
}
}
}
})
})
return spanMap
}
2、Vue 页面使用 table.js
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<script>
import { getTableSpanMap } from '@/utils/table'
export default {
data() {
return {
spanMap: {},
tableData:[]
}
},
created() {
this.fetchTableData()
},
methods:{
fetchTableData() {
this.tableData=[{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '哈哈哈',
address: '上海市普陀区金沙江路 1519 弄'
}]
this.setTableSpanMap();// 设置合并行坐标阵列
},
setTableSpanMap(){
this.spanMap = getTableSpanMap(this.tableData,["name","address"])//合并 name、address 列
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
return this.spanMap[rowIndex + '-' + columnIndex]
}
}
}
</script>