Vue实战(五):实现表格的合并行
1、初始化表格布局
<el-table :span-method="arraySpanMethod" :header-cell-style="headFirst" border :data="tableData" :cell-style="{'text-align':'center'}">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
2、初始化表格数据
data() {
return {
tableData: [
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1515 弄' },
{ date: '2016-05-01', name: '王大虎', address: '上海市普陀区金沙江路 1516 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
],
mergeObj: {},
mergeArr: ['date', 'name']
}
}
3、实现合并行的方法
methods: {
rowspan() {
for (let key of this.mergeArr) {
let count = 0
this.mergeObj[key] = []
this.tableData.forEach((item, index) => {
if (index === 0) {
this.mergeObj[key].push(1)
} else {
if (item[key] === this.tableData[index - 1][key]) {
this.mergeObj[key][count] += 1
this.mergeObj[key].push(0)
} else {
count = index
this.mergeObj[key].push(1)
}
}
})
}
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (this.mergeArr.indexOf(column.property) !== -1) {
if (this.mergeObj[column.property][rowIndex]) {
return {
rowspan: this.mergeObj[column.property][rowIndex],
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
} else {
return {
rowspan: 1,
colspan: 1,
}
}
},
headFirst({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) {
return { display: 'none' }
}
}
}
4、钩子函数调用方法
mounted() {
this.rowspan()
}
5、效果图