vue+ element table表格增加前端本地分页功能

news/2024/7/10 2:06:04 标签: vue, elementui

效果图

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
data中定义:
在这里插入图片描述

在这里插入图片描述

代码:

<el-table
        ref="myTable"
        v-loading="crud.loading"
        :row-key="getRowKey"
        :header-cell-style="{ color: '#FFF', background: '#333' }"
        :cell-style="{ color: '#FFF', background: '#333' }"
        :data="
          crud.data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        @selection-change="selectionChange"
        :default-sort="{ prop: 'posName', order: '' }"
        @sort-change="sortChange"
      >
 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next,sizes"
      :total="crud.data.length"
    >
    </el-pagination>

`data中定义:

 currentPage: 1, //当前页
 pageSize: 10, //每页显示条数

方法代码

 handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    // 页码改变切换
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },

http://www.niftyadmin.cn/n/843349.html

相关文章

HTML练习之路10

本次我们需要制作如图所示的音乐盒界面&#xff1a; 分析结构可知&#xff1a;整体由一个标题&#xff0c;一个段落文本和一张图片构成&#xff1b; 由边框可知&#xff0c;需要使用<div>标签&#xff0c;整体可用一个大的<div>包裹两个并列的小<div>&#…

斜杠/和反斜杠\

一. Unix使用斜杆/ 作为路径分隔符&#xff0c;而web应用最新使用在Unix系统上面&#xff0c;所以目前所有的网络地址都采用 斜杆/ 作为分隔符。 Windows由于使用 斜杆/ 作为DOS命令提示符的参数标志了&#xff0c;为了不混淆&#xff0c;所以采用 反斜杠\ 作为路径分隔符。所以…

vue+element table分页多选,保持数据的选中状态

由于分页多选时状态不能保留&#xff0c;用element-ui提供的简单方法 <el-tableref"table"v-loading"crud.loading":header-cell-style"{ color: #FFF, background: #333 }":cell-style"{ color: #FFF, background: #333 }":data&…

HTML练习之路11

本次的任务是完成如图所示界面&#xff1a; 分析可知&#xff0c;整体结构可看成一个大的<div>包裹两个并列的小<div>,第一个小<div>用于放置图片&#xff0c;第二个小<div>用于放置四个段落文本&#xff1a; <body> <div class"d1&quo…

vue+element el-dialog弹出框会变暗解决办法

问题如图&#xff1a; 解决办法 加入append-to-body

javascript组件化(转)

javascript组件化(转) By purplebamboo 3月 16 2015 更新日期:3月 23 2015 文章目录1. 最简陋的写法2. 作用域隔离3. 面向对象4. 抽象出base5. 引入事件机制&#xff08;观察者模式&#xff09;6. 更进一步&#xff0c;richbase7. 结语作为一名前端工程师&#xff0c;写组件的能…

HTML练习之路12

本次要实现如下图所示的咖啡店banner效果图&#xff1a; 其实主要看给了什么素材&#xff0c;总共给了两种图片的素材&#xff0c;所以我们的结构框架就是一个大<div>包含一个小<div>: <body><div class"out"><div class"in"&…

vue+element ui Progress 编写进度条

需求&#xff1a; 第一版使用了canvas来画的 这次看到element 有自带的进度条组件&#xff0c;就尝试用了一下 。做一个笔记~ 代码 <div style"flex: 1" class"left-pro"><el-progress:text-inside"true":stroke-width"30"…