export const tableHeightPagesMixins = {
data() {
return {
dataSource: [],
tableData: [],
currentPage: 1,
pageSizes: [20, 50, 80, 100],
pageSize: 20,
total: 0,
height: 200,
tableHeight: 0,
}
},
mounted() {
this.updateTableScrollData()
window.onresize = () => {
this.updateTableScrollData()
}
},
destroyed() {
window.onresize = null
},
methods: {
updateTableScrollData() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - this.height
})
},
handleSizeChange(val) {
this.pageSize = val
this.setPseudoPagingData()
},
handleCurrentChange(val) {
this.currentPage = val
this.setPseudoPagingData()
},
setPseudoPagingData() {
let list = this.tableData
this.dataSource = list.filter(
(item, index) =>
index < this.currentPage * this.pageSize &&
index >= this.pageSize * (this.currentPage - 1)
)
this.total = list.length
},
},
}
使用
import { tableHeightPagesMixins } from '@/mixins/table-height-pages-mixins'
mixins: [tableHeightPagesMixins],
element例子
<el-table v-show="showFlag == 2" ref="pointMultipleTable" border class="table-box" :data="[damActiveObj]"
:height="tableHeight" row-key="id" :tree-props="{ children: 'children' }" :expand-row-keys="expandRowKeys">
<el-table-column v-for="column in columnAttrs" :key="column.prop" :label="column.label" :prop="column.prop"
:align="column.align || 'right'" :width="column.width" :show-overflow-tooltip="true">
<template slot-scope="{ row }">
<span v-if="column.prop === 'evaluateLevelNm'" :style="{
color: colors[row['evaluateLevel']]
}">
{{ row[column.prop] }}
</span>
<span v-else>{{ row[column.prop] }}</span>
</template>
</el-table-column>
</el-table>