demo效果展示
<template>
<div :id="tableData && tableData.length > 1 ? 'Totalstyle' : ''">
<el-table
:data="tableData"
border
style="width: 60%"
height="200"
:row-class-name="tableRowClassName"
:show-summary="tableDataNew.length > 1"
:summary-method="getSummaries"
>
<el-table-column
label=" "
prop="RowNumber"
width="40"
align="center"
class-name="totalclassname"
>
</el-table-column>
<el-table-column prop="data" align="center" label="标题" width="180"> </el-table-column>
<el-table-column prop="data1" align="center" label="姓名" width="180"> </el-table-column>
<el-table-column prop="data2" align="center" label="技能" width="180"> </el-table-column>
<el-table-column prop="data3" align="center" label="地址"> </el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="form.PageIndex"
:page-sizes="$store.getters.pageSizes"
:page-size="form.PageSize"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</template>
export default {
name: 'test',
data() {
return {
tableDataNew: [],
tableData: [],
total: 10,
form: {},
listdata: [
{
data: '合计',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: ''
},
{
data: '11111111',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 1
},
{
data: '2222222',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 2
},
{
data: '33333333',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 3
},
{
data: '4444444',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 4
},
{
data: '555555',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 5
},
{
data: '666666',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 6
},
{
data: '777777',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 7
},
{
data: '888888',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 8
},
{
data: '99999',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 9
},
{
data: '10101010101010101010',
data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
data2: 'bbbbbbbbbbbbbbbbbbbbb',
data3: 'cccccccccccccccccc',
RowNumber: 10
}
]
}
},
mounted() {
this.list()
},
methods: {
handleSizeChange() {},
handleCurrentChange() {},
list() {
var newdata = []
for (let index = 0; index < this.listdata.length; index++) {
const element = this.listdata[index]
if (element.data != '合计') {
newdata.push(element)
}
}
this.tableData = newdata
this.tableDataNew = JSON.parse(JSON.stringify(this.listdata))
},
tableRowClassName({ row }) {
if (row.data == '合计') {
return 'summary-row'
}
return ''
},
getSummaries(param) {
const { columns, data } = param
const sums = []
var property = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = data.length + 1
return
}
property.push(column.property)
})
if (this.tableDataNew && this.tableDataNew.length > 0) {
let data = this.tableDataNew[0]
for (let item of property) {
if (data[item] == 0 || data[item] == null) {
data[item] = '-'
}
sums.push(data[item])
}
}
return sums
}
}
}
<style>
.summary-row {
background-color: #bfe5f9;
color: #0e2d5f;
}
//合计样式
#Totalstyle {
.el-table__body-wrapper {
overflow-y: auto !important;
position: relative;
margin-top: 30px;
}
.el-table__footer-wrapper {
top: 30px;
position: absolute;
.totalclassname {
.cell {
display: none;
}
}
}
.el-table__header-wrapper tbody td,
.el-table__footer-wrapper tbody td {
background-color: #bfe5f9 !important;
color: #0e2d5f;
}
}
</style>