码迷,mamicode.com
首页 > 其他好文 > 详细

如何将elementUI 表格(el-table)和分页器(el-pagination)连接起来

时间:2020-07-19 15:47:22      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:tail   archive   取数   page   methods   对象   ddr   add   tps   

el-table表格的代码:

 <template>
    <el-table
      :data="tableData"
      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>
  </template>

 <script>
    export default {
      data() {
        return {
          tableData: [{
            date: ‘2016-05-02‘,
            name: ‘王小虎‘,
            address: ‘上海市普陀区金沙江路 1518 弄‘
          }, {
            date: ‘2016-05-04‘,
            name: ‘王小虎‘,
            address: ‘上海市普陀区金沙江路 1517 弄‘
          }, {
            date: ‘2016-05-01‘,
            name: ‘王小虎‘,
            address: ‘上海市普陀区金沙江路 1519 弄‘
          }, {
            date: ‘2016-05-03‘,
            name: ‘王小虎‘,
            address: ‘上海市普陀区金沙江路 1516 弄‘
          }]
        }
      }
    }
  </script>

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

el-pagination的代码:

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[2, 5, 8, 10]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 5
      };
    }
  }
</script>

上面是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数据源也会跟着变化,因此就实现了分页器与表格的连接。

参考文章: https://blog.csdn.net/weixin_44093954/article/details/87879012

如何将elementUI 表格(el-table)和分页器(el-pagination)连接起来

标签:tail   archive   取数   page   methods   对象   ddr   add   tps   

原文地址:https://www.cnblogs.com/aurora-ql/p/13339369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!