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 = valthis.setPseudoPagingData()},handleCurrentChange(val) {this.currentPage = valthis.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>
