vue——element-ui中的表格和分页器连接起来

简介: vue——element-ui中的表格和分页器连接起来

上面的代码时elementUI官方示例,简单分析一下:el-table 里面的:data是数据源;el-table-column 是表格里面的每一行的数据,它里面的 prop 绑定的是 :data 数据源里面的某个属性值,由此形成一个表格。

//分页器绑定到数据中
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border
style="width:100%" >
     <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
</el-table>


分页器 el-pagination的代码:

<el-pagination small 
layout="total,prev,pager,next,jumper" 
:total="tableData.length"
:page-size="pagesize"
pager-count="5"
:current-page="currentPage"
@current-change="handleCurrentChange"
></el-pagination>
data(){
    return{
        pagesize:5,
      currentPage:1
    }
},
methods: {
  handleCurrentChange(val){
    this.currentPage = val;
  }
}

上面是elementUI关于分页器的最全功能的代码示例,简单分析如下:size-change事件在当前页面数据条数变化时触发;current-change事件在当前页面跳转到其它页时触发;current-page 是当前所在的页码;page-sizes 是可选的页面数据条数;page-size 是默认显示的数据条数;layout 是控制分页器的布局,里面的内容是固定的,但是可以调换位置;total 是页面总数据条数。

那么如何将table和pagination连接起来呢?

其实很简单,在实现上面代码的前提下,将el-table 表格中绑定的 data 数据源做如下修改即可:

:data="tableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)"

这段代码什么意思呢?这就又涉及到基础知识了–数组的方法,更多关于js内置对象及其方法可以参考这篇文章

首先是数组的 .slice 方法,用来截取数组,它接受收两个参数,第一个是开始的索引值,第二个是结束的索引值。截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值。

所以,当前页为第一页时 data 数据源为 从第0条到第 pageSize 条,而当currentPage或者pageSize发生改变时,data数据源也会跟着变化,因此就实现了分页器与表格的连接。


目录
相关文章
|
10天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
10 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
6天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
19天前
|
JavaScript
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
【Ant designe vue】中有关表格列中日期展示 yyyy-mm-dd 格式问题
12 0
|
2天前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
15 2
|
6天前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
10天前
|
JavaScript
UI库的按需加载(vue的问题)
UI库的按需加载(vue的问题)
12 0
|
23天前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
12 0
|
23天前
|
JavaScript 数据库
vue使用element ui实现下拉列表分页的功能!!!
vue使用element ui实现下拉列表分页的功能!!!
15 0
|
25天前
|
存储 JavaScript 定位技术
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
vue中实现地图与数据表格交互的六种场景(附具体代码示例)
25 0
|
26天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
19 1

热门文章

最新文章