el-table 列分页

在这里插入图片描述

<template><div><el-table:data="tableData":key="tampTime"style="width: 100%"><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnv-for="(item, index) in showColData":key="index":label="item.colLabel"><template slot="header"><div class="custom-header-cell"><span class="label">{{item.colLabel}}</span><template v-if="colPage.totalPage > 1"><div v-if="!index" :class="['prev-btn', {disabled: colPage.current === 1}]" @click="handlePrev">上一页</div><div v-if="index === showColData.length - 1" :class="['next-btn', {disabled: colPage.current === colPage.totalPage}]" @click="handleNext">下一页</div></template></div></template><template slot-scope="scope">{{ scope.row.colData[item.index].colValue }}</template></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [],fullColData: [],showColData: [],colPage: {current: 1,size: 10,totalPage: 0},tampTime: ''}},created () {this.initTableData()},methods: {// 模拟一些数据initTableData () {const result = []for (let i = 0; i < 10; i++) {const obj = {name: '张三',age: 18,gender: '男',colData: []}for (let j = 0; j < 40; j++) {obj.colData.push({colLabel: `${j + 1}`,colValue: `${i + 1}_${j + 1}`})}result.push(obj)}this.tableData = resultthis.initColData()},// 初始化列initColData () {const { tableData, colPage } = thisconst { colData: fullColData } = tableData[0]// 添加索引,用于取数据fullColData.forEach((item, index) => {item.index = index})this.fullColData = fullColDatalet showColData = fullColDataif (fullColData.length > colPage.size) {showColData = fullColData.slice(0, 10)}this.showColData = showColDatathis.colPage.totalPage = Math.ceil(fullColData.length / colPage.size)},// 上一页handlePrev () {let { current } = this.colPageif (current > 1) {current--this.colPage.current = currentthis.changeCellData()}},// 下一页handleNext () {let { current, totalPage } = this.colPageif (current < totalPage) {current++this.colPage.current = currentthis.changeCellData()}this.$forceUpdate()},// 根据页数改变列数据changeCellData () {const { colPage, fullColData } = thisconst startSlice = (colPage.current - 1) * colPage.sizeconst endSlice = startSlice + colPage.sizeconst showColData = fullColData.slice(startSlice, endSlice)this.showColData = showColDatathis.tampTime = new Date().valueOf()}}
}
</script><style lang="scss" scoped>
::v-deep .el-table {// 默认是 hidden 按钮超出会隐藏.el-table__header-wrapper,th.el-table__cell,.cell {overflow: visible;}.custom-header-cell {position: relative;.label {position: relative;z-index: 2;color: #000;}.prev-btn,.next-btn {width: 20px;padding: 6px 0;position: absolute;z-index: 9;top: -12px;background-color: #3f3fbb;color: #fff;text-align: center;font-weight: 400;line-height: 18px;transition: all .4s;&:hover {cursor: pointer;opacity: .8;}&.disabled {cursor: not-allowed;background-color: #a6a7e2;}}.prev-btn {left: -30px;}.next-btn {right: -10px;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/159966.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT学习之QT概述

1.1 什么是QT&#xff1f; Qt是一个跨平台的C图形用户界面应用程序框架。 QT特点&#xff1a; 跨平台&#xff0c;几乎支持所有的平台接口简单&#xff0c;容易上手&#xff0c;学习QT框架对学习其他框架有参考意义。一定程度上简化了内存回收机制开发效率高&#xff0c;能够…

22款奔驰S400L升级原厂 360全景影像 高清环绕的视野

您是否经历过这种场面呢&#xff1f; 停车位&#xff0c;狭窄障碍停车困难 避免盲区&#xff0c;倒车盲区危及生命安全 狭窄路段&#xff0c;无法判断是否安全通过 视角盲区&#xff0c;小孩站在视野盲区看不到 360度无缝3D全车可见&#xff0c;解决各个视角盲区&#xff…

【leetcode】26. 删除有序数组中的重复项(图解)

目录 1. 思路&#xff08;图解&#xff09;2. 代码 题目链接&#xff1a; leetcode 26. 删除有序数组中的重复项 题目描述&#xff1a; 注意返回的是去重后的数组长度&#xff0c;但是输出的是去重后的数组元素。 1. 思路&#xff08;图解&#xff09; 思路&#xff1a;快慢…

axios 全局错误处理和请求取消

这两个功能都是用拦截器实现。 前景提要&#xff1a; ts 简易封装 axios&#xff0c;统一 API 实现在 config 中配置开关拦截器 全局错误处理 在构造函数中&#xff0c;添加一个响应拦截器即可。在构造函数中注册拦截器的好处是&#xff0c;无论怎么实例化封装类&#xff0c…

2023年测试如果想拿到心怡的offer必会的12大技能

01 业务熟悉 &#x1f3af; 1&#xff1a;熟悉本系统 测试人员参与测试的系统的各种业务场景&#xff0c;必须做到精熟 。一旦需求有改动&#xff0c;可以清楚快速的知道上下文。同时可以清楚的知道哪些点是需要重点测试的。 &#x1f3af; 2&#xff1a;熟悉跟本系统有通讯…

设计模式—结构型模式之适配器模式

设计模式—结构型模式之适配器模式 将一个接口转换成客户希望的另一个接口&#xff0c;适配器模式使接口不兼容的那些类可以一起工作&#xff0c;适配器模式分为类结构型模式&#xff08;继承&#xff09;和对象结构型模式&#xff08;组合&#xff09;两种&#xff0c;前者&a…

【蓝桥杯选拔赛真题10】C++求奇数和 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析

目录 C/C++求奇数和 一、题目要求 1、编程实现 2、输入输出 二、算法分析 <

在二维矩阵/数组中查找元素 Leetcode74, Leetcode240

这一类题型中二维数组的元素取值有序变化&#xff0c;因此可以用二分查找法。我们一起来看一下。 一、Leetcode 74 Leetcode 74. 搜索二维矩阵 这道题要在一个二维矩阵中查找元素。该二维矩阵有如下特点&#xff1a; 每行元素 从左到右 按非递减顺序排列。每行的第一个元素 …

速学数据结构 | (超级干货)业界程序员公认的实现栈最简单的方法!太简单了

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525;个人专栏:《Linux深造日志》《C干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! &#x1f4cb; 前言 &#x1f308;hello&#xff01; 各位铁铁们大家好啊&#xff0c;今天来给大家更新一下栈这个数据结构,…

STM32笔记-AD模数转换

目录 一、ADC介绍 二、ADC主要特征 三、ADC框图 1. ​​​​ 外部触发转换 ​ 2. 转换模式 3. 输入通道 4. 逻辑框图 四、校准 五、数据对齐 六、AD转换步骤 七、AD_Init(单通道AD转换)初始化函数配置 一、ADC介绍 1. 12位ADC是一种逐次逼近型模拟数字转换器。它有多达…

R语言中的自带的调色板--五种--全平台可用

R语言中的自带的调色板–五种–全平台可用

逆袭Flutter? Facebook 发布全新跨平台引擎 Hermes!

Facebook 于前日发布了新的 JavaScript 引擎&#xff1a;Hermes&#xff0c;专注于提高 React Native 应用的性能&#xff0c;并且在市面上那些内存较少、存储速度较慢且计算能力低下的移动设备上都有良好的表现。但是不是为了追赶Flutter&#xff1f;这块作者没有说明。 移动应…