element table 需要将第一列数据相同的内容进行合并，这里将实现代码记录下来。
实现代码
/**
* @Author: 858834013@qq.com
* @Name: tables
* @Date: 2022-10-16
* @Desc:
*/
<template>
<div class="tables">
<el-table
:data="content"
height="100%"
:span-method="objectSpanMethod"
border>
<el-table-column
prop="classDate"
align="center"
label="日期">
</el-table-column>
<el-table-column
prop="courseName"
align="center"
label="课程名称">
</el-table-column>
<el-table-column
prop="courseClaszTime"
align="center"
label="时间">
</el-table-column>
<el-table-column
prop="coursePlaceName"
align="center"
label="训练场地">
</el-table-column>
<el-table-column
prop="coachName"
align="center"
label="教官">
</el-table-column>
</el-table>
</div>
</template>
<script>
import {tbClaszTime, tbCourseClass} from "@/api/api/user";
import {mapState, mapGetters, mapMutations} from 'vuex';
export default {
name: "tables",
components: {},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
content: [],
list: [],
listHead: [],
listBody: [],
spanArr: [],
spanCodeArr: [],
indexInfoList: []
}
},
computed: mapGetters(['orderId']),
watch: {
orderId() {
this.getdata()
}
},
mounted() {
this.getdata()
},
methods: {
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
let index = this.indexInfoList.findIndex(item => { //遍历数组
return item.firstIndex === rowIndex
})
if (index > -1) {
return {
rowspan: this.indexInfoList[index].length,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
sortKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x < y) ? -1 : (x > y) ? 1 : 0)
})
},
getdata() {
var that = this;
tbCourseClass({
page: 0,
size: 500,
sort: 'claszOrderNo',
orderId: 'eb919a5fd57045c698352061d19449bb'
}).then(res => {
this.content = res.content
this.dataList = res.content || []
// 获取每个类目下的条数
let arr = []
// let indexList = []
this.dataList.forEach(ele => {
let firstIndex = this.dataList.findIndex(item => {
return item.classDate === ele.classDate // 当category相同的时候，返回第一个相同的Index 赋值给 firstIndex
})
if (arr.findIndex(item => {
return item.firstIndex === firstIndex
}) === -1) {
arr.push({
length: this.dataList.filter(item => {
return item.classDate === ele.classDate //利用数组的filter方法，过滤出相同category的数组的长度。数组长度-即为跨多少行
}).length,
firstIndex: firstIndex // firstIndex 返回的是第一个catergory就满足的第一个Index,即为rowIndex开始于第几行。
})
}
})
// arr = new Set(arr)
// console.log(arr)
this.indexInfoList = arr // 得到的arr里面的内容：Array(3) // 0 : firstIndex : 0; length: 4 1: firstIndex: 4 length:5
console.log(arr)
}).catch(err => {
})
},
}
}
</script>
<style lang="scss" scoped>
.tables {
width: calc(100% - 55px);
margin: 0 auto;
position: relative;
height: calc(100% - 70px);
margin-top: 10px;
}
.tablesBottom2 {
width: calc(100% + 0px);
position: relative;
height: calc(100% - 50px);
overflow-y: scroll;
}
.tablesBottom {
width: calc(100% - 5px);
position: relative;
border: 1px solid #0a1c98;
height: calc(100% - 10px);
border-top: 0;
.tablesBottoms {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
border-bottom: 1px solid #0a1c98;
.tablesBottomsItem {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
position: relative;
height: 52px;
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #dfe1f9;
box-sizing: border-box;
border-right: 1px solid #0a1c98;
flex: 1;
background: rgba(#02096e, 1);
span:first-child {
border: 0;
}
span {
//border-left: 1px solid #fdad16;
}
em {
font-style: normal;
}
span {
text-align: center;
}
}
.tablesBottomsItem:nth-child(2n) {
background: rgba(#02096e, 0.5);
}
.tablesBottomsItem:last-child {
border: 0;
}
}
.tablesBottoms:nth-child(2n) {
.tablesBottomsItem {
background: rgba(#02096e, 0.8);
}
.tablesBottomsItem:nth-child(2n) {
background: rgba(#02096e, 0.6);
}
}
}
.tables {
.is-scrolling-none::-webkit-scrollbar {
width: 6px;
height: 200px;
}
/*滚动条滑块*/
.is-scrolling-none::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px #0e98f5;
background: #0e98f5;
}
/*滚动条轨道*/
.is-scrolling-none::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #1f4962;
border-radius: 10px;
background: rgba(0, 0, 0, 0);
}
//横向horizontal
.is-scrolling-left::-webkit-scrollbar {
width: 100%;
height: 10px;
}
/*滚动条滑块*/
.is-scrolling-left::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background: #0e98f5;
border-radius: 5px;
}
/*滚动条轨道*/
.is-scrolling-left::-webkit-scrollbar-track {
}
/*滚动条轨道*/
.is-scrolling-left::-webkit-scrollbar-track-piece {
background-color: rgba(2, 6, 23, 0);
}
//横向滚动右侧
.is-scrolling-right::-webkit-scrollbar {
width: 100%;
height: 10px;
}
/*滚动条滑块*/
.is-scrolling-right::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background: #0e98f5;
border-radius: 5px;
}
/*滚动条轨道*/
.is-scrolling-right::-webkit-scrollbar-track {
}
/*滚动条轨道*/
.is-scrolling-right::-webkit-scrollbar-track-piece {
background-color: rgba(2, 6, 23, 0);
}
//横向滚动中部
.is-scrolling-middle::-webkit-scrollbar {
width: 100%;
height: 10px;
}
/*滚动条滑块*/
.is-scrolling-middle::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background: #0e98f5;
border-radius: 5px;
}
/*滚动条轨道*/
.is-scrolling-middle::-webkit-scrollbar-track {
}
/*滚动条轨道*/
.is-scrolling-middle::-webkit-scrollbar-track-piece {
background-color: rgba(2, 6, 23, 0);
}
::v-deep {
.el-table--border, .el-table--group {
border: 1px solid #0a1c98;
}
.el-table, .el-table__expanded-cell {
background: none;
}
.el-table th, .el-table tr {
background: none;
font-size: 13px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: rgba(9, 124, 184, 0.2);
}
.has-gutter {
background: rgba(39, 124, 246, 0.3);
color: rgba(255, 255, 255, 1);
}
.el-table td, .el-table th.is-leaf {
//border: none;
//border: 1px solid #0a1c98;
border-right: 1px solid #0a1c98;
border-bottom: 1px solid #0a1c98;
color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: rgba(9, 124, 184, 0.2);
color: #fff;
}
.el-table td, .el-table th {
padding: 10px 0;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
display: none;
}
}
}
.el-table--border th.el-table__cell.gutter:last-of-type {
border: 0;
}
</style>
![[plugin:vite:vue] [vue/compiler-sfc] Unterminated string constant. (27:23)](https://images.wanjunshijie.com/img/pic/9.jpg?imageView2/1/w/185/h/110/format/jpg/interlace/1/q/75|watermark/2/text/5a6M56uj5LiW55WM/font/5pa55q2j6buR5L2T/fontsize/240/fill/I0ZBRjZGNg==/dissolve/100/gravity/SouthEast/dx/10/dy/10)
