20241 月25
el-table 尾部汇总放在第一行
调用页面添加样式
<style scoped>
::v-deep .el-table {
display: flex;
flex-direction: column;
}
::v-deep .el-table__body-wrapper {
order: 1;
}
::v-deep .el-table__fixed-body-wrapper {
top: 92px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
z-index: 0;
top: 45px;
}
</style>
分页组件完整代码
<template>
<div class="data-list">
<transition name="el-fade-in">
<div v-show="selectRows.length > 0" class="el-selection-bar">
选择了<span class="el-selection-bar__text">{{ selectRows.length }}</span
>条数据
<a class="el-selection-bar__clear" @click="clearSelection">清空</a>
</div>
</transition>
<div v-loading="isRequestIng" class="data-list__table" :element-loading-text="loadingTxt">
<span v-if="summary">总条数：{{ rows.length }}</span>
<el-table
v-bind="$attrs"
ref="tabList"
:data="rows"
v-on="$listeners"
:border="true"
:span-method="handleRowSpanMethod"
:show-summary="summary"
sum-text=" 汇 总 "
>
<slot />
<pro-empty slot="empty" />
</el-table>
</div>
<div v-if="!summary && (pageData.totalCount > pageData.pageSize || pageData.pageSize > 10)" class="data-list__pager">
<el-pagination
:current-page="pageData.pageNo"
:page-size="pageData.pageSize"
:total="pageData.totalCount"
background
:page-sizes="pageSizes"
layout="total, ->, prev, pager, next, sizes, jumper"
@current-change="doChangePage"
@size-change="doSizeChange"
/>
</div>
</div>
</template>
<script>
import { forIn, findIndex, cloneDeep, remove, uniqBy, concat, isArray, first } from "lodash-es"
import { f } from 'vue-marquee-component'
export default {
name: "PlusTableList",
props: {
server: {
type: String,
require: true,
default: ""
},
methods: {
type: String,
default: "post"
},
lazy: {
type: Boolean,
default: false
},
data: {
type: Object,
default: () => {}
},
dataFilter: {
type: Function,
default: data => data
},
loadingTxt: {
type: String,
default: "数据加载中..."
},
paramClear: {
type: Boolean,
default: false
},
selectRows: {
type: Array,
default: () => []
},
selectable: {
type: Function,
default: () => true
},
rowKey: {
type: String,
default: "id"
},
selection: {
type: Boolean,
default: true
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 50]
},
// 合并行(第一列)
spanName0: {
type: String,
default: null
},
// 合并行(第二列)
spanName1: {
type: String,
default: null
},
// 是否汇总数据
summary: {
type: Boolean,
default: false
}
},
data() {
return {
pageData: {
pageNo: 1,
pageSize: 10,
totalCount: 0
},
rows: [],
isRequestIng: false
}
},
watch: {
pageSizes: {
handler: function (val) {
if (isArray(val)) {
this.pageData.pageSize = first(val)
}
},
immediate: true
}
},
mounted() {
if (!this.lazy) {
this.getList()
}
},
methods: {
// 合并相同值的行
handleRowSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (!this.spanName0) return
if (rowIndex > 0 && row[this.spanName0] === this.rows[rowIndex - 1][this.spanName0]) {
return {
rowspan: 0,
colspan: 0
}
} else {
let count = 1
for (let i = rowIndex + 1; i < this.rows.length; i++) {
if (row[this.spanName0] === this.rows[i][this.spanName0]) {
count++
} else {
break
}
}
if(count>1){
return {
rowspan: count,
colspan: 1
}
}
}
}
if (columnIndex === 1) {
if (!this.spanName1) return
// 第一列值相同，且第二列值相同的的情况下合并
if (rowIndex > 0 && row[this.spanName0] === this.rows[rowIndex-1][this.spanName0] && row[this.spanName1] === this.rows[rowIndex - 1][this.spanName1]) {
return {
rowspan: 0,
colspan: 0
}
} else {
let count = 1
for (let i = rowIndex + 1; i < this.rows.length; i++) {
// 第一列值相同，且第二列值相同的的情况下合并
if (row[this.spanName0] === this.rows[i][this.spanName0] && row[this.spanName1] === this.rows[i][this.spanName1]) {
count++
} else {
break
}
}
if(count>1){
return {
rowspan: count,
colspan: 1
}
}
}
}
},
// 页码变动事件
doChangePage(val) {
this.pageData.pageNo = val
this.getList()
},
// 页大小变动事件
doSizeChange(val) {
this.pageData.pageSize = val
this.pageData.pageNo = 1
this.getList()
},
getList() {
const { totalCount, ...pager } = this.pageData
const params = Object.assign({}, this.data, pager)
if (this.paramClear) {
forIn(params, (value, key) => {
if (value === "") delete params[key]
})
}
this.isRequestIng = true
this.$get(params)
.then(({ data }) => {
this.rows = this.dataFilter(data.list || [])
this.pageData.totalCount = data.totalCount
this.$emit("updateTotal", data.totalCount)
this.isRequestIng = false
this.$nextTick(() => {
this.handlePageUpdate()
})
})
.catch(error => {
this.isRequestIng = false
})
},
handlePageUpdate() {
const list = this.rows
list.forEach(row => {
if (
findIndex(this.selectRows, el => {
return el[this.rowKey] === row[this.rowKey]
}) !== -1
) {
this.$refs.tabList.toggleRowSelection(row, true)
}
})
},
handleSelectionChange(val) {
const selectRows = cloneDeep(this.selectRows)
this.$nextTick(() => {
const list = this.rows.map(el => el[this.rowKey])
remove(selectRows, el => {
return list.includes(el[this.rowKey])
})
this.$emit(
"update:selectRows",
uniqBy(concat(selectRows, val), el => el[this.rowKey])
)
})
},
$get(data) {
if (this.methods === "get") {
return this.$axios.get(this.server, {
params: data
})
} else {
return this.$axios.post(this.server, data)
}
},
reset() {
this.pageData.pageNo = 1
this.pageData.totalCount = 0
this.rows = []
this.clearSelection()
},
async clearSelection() {
this.$refs.tabList.clearSelection()
await this.$nextTick()
this.$emit("update:selectRows", [])
},
query() {
this.reset()
this.getList()
}
}
}
</script>