vue结合element ui实现分页

news/2024/7/10 1:29:38 标签: vue
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%"></el-table>

data数据

 tableData: [],
 total: 100, //总条数
pagesize: 3, //每页的数据条数
currentPage: 1 //默认开始页面

分页组件

<el-pagination    
          @current-change="gai"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]" 
              :page-size="pagesize"    
              layout="total, prev, pager, next, jumper"
              :total="tableData.length">  
    </el-pagination>

js部分

 //分页
    gai(currentPage) {
      this.currentPage = currentPage;
    },
    // 页数
    handleSizeChange: function (size) {
        this.pagesize = size;
    },

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

相关文章

vue结合element ui实现编辑

页面 <template slot-scope"scope">><i click"edmit(scope.$index,scope.row)" class"el-icon-edit"></i><i class"el-icon-delete" click"del"></i><i class"el-icon-star-on&q…

Element-ui时间转换,状态转换

Element适用过滤器 <el-table-column prop"status" label"状态"><template slot-scope"scope">{{ scope.row.status | dateFormat }}</template></el-table-column>filters: {dateFormat(val) {switch (val) {case 1:re…

前端笔记整理

前端面试题 1.响应式布局如何实现 响应式布局可以让网站同时适配不同分辨率和不同的手机端&#xff0c;让客户有更好的体验。为什么要使用响应式布局:在之前使用固定宽高有一定的局限&#xff1a;屏幕越来越宽时&#xff0c;因为定 得宽是固定的…

跨域与同源策略

##ajax 跨域 http://baidu.com:80/list 不同协议&#xff0c;不同域名&#xff0c;不同端口以及域名和 ip 地址的访问都会产生跨域。 什么情况下发生跨域 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 当前url被请求的url是否跨域原因http://w…

瀑布式布局

##什么是瀑布式布局&#xff1f; 瀑布流又称瀑布流式布局&#xff0c;视觉表现为参差不齐的多栏布局&#xff0c;其实就是多行等宽元素排列&#xff0c;后面的元素依次添加到其后&#xff0c; 等宽不等高&#xff0c;根据图片原比例缩放直至宽度达到我们的要求&#xff0c;依次…

vuex具体使用

vuex 持久化数据 **** 作用&#xff1a;解决vuex的一个痛点&#xff0c;就是你当使用vuex&#xff0c;页面中进行刷新&#xff0c;那么你操作之后的状态&#xff0c;都还原了&#xff0c;初始状态1. 下载安装 &#xff1a; cnpm install vuex-persistedstate 持久化数据插件 2…

git配置私钥

1.本地安装好git&#xff1b; 2.桌面右键 Git Bash Here 打开git命令行&#xff1b; 3.ssh-keygen -t rsa -C “nideyouxiangxxx.com” &#xff08;全部按enter&#xff09;&#xff1b; 4.cd ~/.ssh &#xff08;如果没有执行第三步&#xff0c;则不会有这个文件夹&#xff0…

JS相关知识

1.JS的发展过程 历史回顾、能做什么 给页面添加动态效果2.JS是什么 简介、实现、版本运行在客户端浏览器的脚本语言 3.JS语言特点和定位 语言特点、与web开发流程区别 弱类型 面向对象 java ecmascript 5 es5 es6 es2015 js的组成 ECMA…