antdv和element表格,假分页+表格高度处理mixins

javascript 复制代码
// 表格假分页+表格高度mixins
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() {
    // 注销onresize事件
    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() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.tableData //后端回来表格的数据
      //表格渲染的数据  indexResultsTable:[],
      this.dataSource = list.filter(
        (item, index) =>
          index < this.currentPage * this.pageSize &&
          index >= this.pageSize * (this.currentPage - 1)
      ) //根据页数显示相应的内容
      this.total = list.length
    },
  },
}

使用

javascript 复制代码
import { tableHeightPagesMixins } from '@/mixins/table-height-pages-mixins'
mixins: [tableHeightPagesMixins],

element例子

javascript 复制代码
 <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>
相关推荐
美酒没故事°10 分钟前
npm源管理器:nrm
前端·npm·npm源
用户221520442780011 分钟前
vue3组件间的通讯方式
前端·vue.js
三十_A29 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子37 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒37 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691537 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影38 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天39 分钟前
CSS 属性值的计算与过程
前端
云鹤_40 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei42 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端