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>
相关推荐
一个不爱写代码的瘦子22 分钟前
迭代器和生成器
前端·javascript
拳打南山敬老院23 分钟前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰24 分钟前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区25 分钟前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶11130 分钟前
web服务代理用它,还不够吗?
前端
Liamhuo1 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_1 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生1 小时前
React 组件渲染
前端·react.js
sjd_积跬步至千里1 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙1 小时前
前端基础避坑:3 个实用知识点的简单用法
前端