一、在el-table中添加 :span-method="objectSpanMethod" 属性实现单元格合并
<el-table :data="tableData" :span-method="objectSpanMethod"><el-table-column label="班级" prop="id" align="center"></el-table-column><el-table-column label="姓名" prop="name" align="center"></el-table-column><el-table-column label="成绩" align="center"><el-table-column label="数学" prop="math" align="center"></el-table-column><el-table-column label="语文" prop="chinese" align="center"></el-table-column><el-table-column label="英语" prop="english" align="center"></el-table-column></el-table-column></el-table>
二、objectSpanMethod 方法
<script>export default {data() {return {spanArr: [],pos: 0,tableData: [],}},async mounted() {this.query();methods: {query() {this.axios.post('/score', {time: this.begin_time,}).then((res) => {this.tableData = res.data.resultthis.getSpanArr(this.tableData) //把表格数据给到getSpanArr}).catch((err) => {console.log(err)})},getSpanArr(data) {this.spanArr = [];for (let i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {if (data[i].id=== data[i - 1].id) { //相同班级合并this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}},objectSpanMethod({ rowIndex, columnIndex }) {//合并第一列if (columnIndex === 0) { const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col}}},}}</script>
三、效果图
