需求是要对表格的相同项的数据进行合并,elment-ui的table组件有提供这种需求,但是demo比较简单,网上搜了一遍想找参考大部分写的没太看懂,于是自己花了点时间写了个较简单的demo
/* eslint-disable */
<template>
<div>
<el-table
:data="elTable"
:span-method="mergeTable"
border
style="width: 500; margin-top: 20px">
<el-table-column
prop="month"
label="时间"
width="180">
<template slot-scope="scope">
<span>{{scope.row.month}}</span>
<el-button type="danger" size="mini" @click="addItem(scope)">添加</el-button>
</template>
</el-table-column>
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteItem(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 这里假设同一日期的数据是紧邻的 比如同一天日期的数据在前后顺序紧挨着
elTable: [
{
month: '2018-12-1',
name: '张三',
id: 1,
},
{
month: '2018-12-1',
name: '李四',
id: 2,
},
{
month: '2018-12-1',
name: '王五',
id: 3,
},
{
month: '2018-12-2',
name: '张三',
id: 1,
},
{
month: '2018-12-2',
name: '李四',
id: 2,
},
{
month: '2018-12-3',
name: '王五',
id: 3,
},
{
month: '2018-12-3',
name: '张三',
id: 1,
},
{
month: '2018-12-3',
name: '李四',
id: 2,
},
{
month: '2018-12-3',
name: '王小虎',
id: 6,
},
],
// 存放表格日期单元格的rowspan和colspan信息
spanArr: []
};
},
watch: {
// 观测表格数据 更新行列信息
elTable: {
handler: function(){
this.spanArr = this.getSpanData()
}
}
},
methods: {
// 遍历分析表格数据 记录每一行的rowspan和colspan
getSpanData(){
let spanArr = []
for (let i = 0; i < this.elTable.length; i++) {
let obj = {}
if (i === 0) {
// 第一项直接设置默认的值
obj.rowspan = 1
obj.colspan = 1
spanArr.push(obj)
} else {
if (this.elTable[i].month === this.elTable[i-1].month) {
// 前后两项的month相同 后面那一项rowspan和rowspan都设置为0
obj.rowspan = 0
obj.rowspan = 0
spanArr.push(obj)
// 找到month相同项中第一项 rowspan值加1
let index = this.elTable.findIndex((item)=>item.month === this.elTable[i].month)
++spanArr[index].rowspan
} else {
// 前后不相同 一个新的日期 设置默认值就好
obj.rowspan = 1
obj.colspan = 1
spanArr.push(obj)
}
}
}
return spanArr
},
mergeTable({ row, column, rowIndex, columnIndex }) {
// 这里只针对第一列进行合并操作
if (columnIndex === 0) {
let rowspan = this.spanArr[rowIndex].rowspan
let colspan = this.spanArr[rowIndex].colspan
return {rowspan, colspan}
}
},
addItem(scope) {
// 假数据
let item = {
id: 8,
name: 'jack'
}
item.month = scope.row.month
let inserIndex = scope.$index + 1
for (let i = inserIndex; i < this.elTable.length; i++) {
if (this.elTable[i].month === item.month) {
++inserIndex
} else {
break
}
}
this.elTable.splice(inserIndex, 0, item)
console.log(this.spanArr)
},
deleteItem(index) {
this.elTable.splice(index, 1)
}
}
};
</script>
复制代码
通过element-ui的提供的span-method我们可以自定义一个mergeTable方法去进行行列合并的操作,这里我们要对同一个日期的单元格进行合并,mergeTable需要返回当前行中日期那一项的rowspan和colspan。表格数据存在elTable中,elTable更新后,通过便利分析elTable的数据可以将合并后的行列信息存在spanArr数组中,这样mergeTable方法可以直接通过索引得到对应的rowspan和colspan。