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>
相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
excel8 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript