
<el-table :data="tableData" @sort-change='sortChange' @cell-mouse-enter="handleCellMouseEnter" @cell-mouse-leave="handleCellMouseLeave"
@row-click="onRowClick"
:row-class-name="tableRowClassName" height="calc(100vh - 350px)" border style="cursor: pointer;" :span-method="objectSpanMethod"
>
<el-table-column label="序号" fixed align="center" width="80px">
<template slot-scope="scope">
<span style="display:block;font-size:12px;text-align: center;">{{ ((currentPage-1)*pageSize+scope.$index+1) }}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip :width="col.templateFieldName.length>5?200+'px':120+'px'" :fixed="col.type=='0'?true:false" v-for="(col,index) in cols" :key="index" :prop="col.templateField" :label="col.templateFieldName" :sortable='col.templateField=="wageDate"|| col.templateField=="userOffice" ?true:false'>
</el-table-column>
<el-table-column label="操作" prop="hhh" width="200">
<template slot-scope="scope">
<div class="button edit" @click="AddAndmodify('modify',scope.row.templateDataId)">
<i class="el-icon-edit-outline"></i>
<span>修改</span>
</div>
<div class="button delete" @click="deleteEach(scope.row.templateDataId)">
<i class="el-icon-close"></i>
<span>删除</span>
</div>
</template>
</el-table-column>
</el-table>
arr: [],
index: 0,
currentIndex: ''
this.tableData = [
{
id: 1,
"wageTypes":"事业",
"wageDate":"2023-08-30",
"userOffice":"555",
},
{
id: 1,
"wageTypes":"事业",
"wageDate":"2023-08-30",
"userOffice":"555",
},
{
id: 1,
"wageTypes":"事业",
"wageDate":"2023-08-30",
"userOffice":"555",
},
{
id: 2,
"wageTypes":"行政",
"wageDate":"2022-07-01",
"userOffice":"s",
}
]
this.cols = [
{
"templateField":"wageTypes",
"templateFieldName":"工资类型",
flex: true,
},
{
"templateField":"wageDate",
"templateFieldName":"时间",
flex: true,
},
{
"templateField":"userOffice",
"templateFieldName":"单位",
flex: false,
}
]
handleCellMouseEnter(row, column, rowIndex, columnIndex) {
this.currentIndex = row.id
},
handleCellMouseLeave() {
this.currentIndex = ''
},
tableRowClassName({
row,
column,
rowIndex,
columnIndex
}) {
if (row.id == this.currentIndex) {
return 'hover-bg'
} else {
return ''
}
},
sortChange(column, prop, order) {
if (column.column.label == "单位" && column.order== "ascending") {
this.orderBy = 'userOffice asc'
this.getData();
} else if (column.column.label == "单位" && column.order== "descending") {
this.orderBy = 'userOffice desc'
this.getData();
} else if (column.column.label == "时间" && column.order== "ascending") {
this.orderBy = 'wageDate asc'
this.getData();
} else if (column.column.label == "时间" && column.order== "descending") {
this.orderBy = 'wageDate desc'
this.getData();
}
},
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex == 0) {
let ids = this.spanArr[rowIndex];
let idName = ids > 0 ? 1 : 0
return {
rowspan: ids,
colspan: idName
}
}
},
getSpanArr(data) {
this.arr = [];
this.index = 0
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.arr.push(1);
this.index = 0
} else {
if (data[i].id == data[i - 1].id) {
this.arr[this.index] += 1;
this.arr.push(0);
} else {
this.arr.push(1);
this.index = i;
}
}
}
}
.el-table {
border: 1px solid #e6e6e6;
/deep/ thead th {
background-color: #f5f5f5;
}
/deep/ tr {
cursor: pointer;
height: 20px;
}
/deep/ .el-table__body .el-table__row.hover-bg td {
background-color: #F5F7FA;
}
}