图片展示
html
<el-table
:data="tableData"
style="width: 100%"
:span-method="objectSpanMethod">
<el-table-column
prop="date"
label="时间"
width="220"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="名称"
align="center">
</el-table-column>
</el-table>
js
data() {
return {
rowSpanArr: [],
position: 0,
tableData: [{
date: '周一',
name: '王小虎'
}, {
date: '周一',
name: '王小虎'
}, {
date: '周一',
name: '王小虎'
}, {
date: '周一',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周二',
name: '王小虎'
}, {
date: '周三',
name: '王小虎'
}, {
date: '周三',
name: '王小虎'
}]
}
},
methods: {
countRow() {
this.rowSpanArr = [];
this.tableData.forEach((item, index) => {
if (index == 0) {
this.rowSpanArr.push(1);
this.position = 0;
} else {
if (this.tableData[index].date == this.tableData[index - 1].date) {
this.rowSpanArr[this.position] += 1; //项目名称相同,合并到同一个数组中
this.rowSpanArr.push(0);
this.tableData[index].date = this.tableData[index - 1].date;
} else {
this.rowSpanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = this.rowSpanArr[rowIndex];
return {
rowspan: _row, //行
colspan: 1 //列
};
}
}
}