vue中静态数据怎么分页(以el-table为例子)

简介: vue中静态数据怎么分页(以el-table为例子)

背景:


从别处选择一些数据在界面上用列表展示,列表为静态数据,故需要做分页处理。


解决方案:


Array.prototype.slice()截取数据,slice(begin,end),从begin开始到end结束,不包括end,返回值是截取的数据,返回值类型为数组,不会改变原数组


代码:


  <el-table :data="taskList.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)" stripe style="width: 100%">
  </el-table>
  <el-pagination @current-change="handleCurrentChange" :current-page.sync="data.pageNum" :page-size="data.pageSize" layout="pager, next, jumper" :total="taskList.length">
  </el-pagination>
export default {
     data() {
        return {
            taskList: [],
             data: {
                pageNum: 1,
                pageSize: 10,
     },
     methods: {
        handleCurrentChange(val) {
            this.pageNum = val;
        },
}
目录
相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
14 6
|
2天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6
|
2天前
|
JavaScript
Vue的小知识点
Vue的小知识点
8 2
|
2天前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
9 1
|
2天前
|
JavaScript
VUE之彩虹点击
VUE之彩虹点击
5 1
|
2天前
|
JavaScript 前端开发 网络架构
4.vue路由
4.vue路由
10 1
|
2天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
5 0
BIGEMAP地图VUE中引入
|
1天前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
|
1天前
|
JavaScript
vue基础概念(1)
vue基础概念(1)
6 0