小记：vue中实现table的分页功能

首先声明一下：我用了muse-ui里的组件

<mu-pagination :total="this.searched_list.length" :current="current" @pageChange="f_page_count" style="float: right;margin-bottom: -8px"></mu-pagination>

searched_list主要是根据一定的条件进行数据的过滤。

computed: {
 searched_list: function () {
  let arrList = [];//存放数据
  let list = this.searched_data;
  for (let i = 0; i < list.length; i++) {
   if (list[i].uuid.search(this.query_params.search_uuid) != -1 && list[i].user_id.search(this.query_params.search_userid) != -1
    && list[i].ip.search(this.query_params.search_ip) != -1 && list[i].order_id.search(this.query_params.search_orderid) != -1) {
    arrList.push(list[i]);
   }
  }
  return arrList;
 },

该分页设定了每页10行：pageSize：10

当前页码初始值为1: current=1

 //分页函数
    f_page_count(pno){
   console.log(pno);
  let startRow = (pno - 1)*10 + 1;
  let endRow = (pno * 10);
  let self = this;
  this.$post_with_data('/api/event/list',this.query_params).then(function (d) {
        if (d.status === 'ok') {
         self.count = d.result.recordsNum;
        }
  });
  let num = this.searched_list.length;
  endRow = (endRow > num ? num:endRow);
  $('#table-body tr').hide();
  for (let i = startRow-1;i < endRow;i++){
   $('#table-body tr').eq(i).show();
      }
     this.current = pno;
    },
},

我的列表代码：

<table v-show="show" class="table table-striped table-bordered table-hover " :data="searched_list">
  <thead>
  <tr>
    <th v-for="(table,index) in query_list_header" :key="index">{{table.title}}</th>
  </tr>
  </thead>
  <tbody id="table-body">
  <tr v-for="(items,index) of searched_list" :key="index" v-show="index <10">
    <td v-for="item of items">{{item}}</td>
    <td>
      <router-link to="showInfo">详情信息</router-link>
    </td>
  </tr>
  
  </tbody>
</table>

注意了！！！现在可以实现分页功能了，但是还有一个很明显的问题，那就是这个分页只有在点击页码的时候才会实现，刚开始看到的就是全部的数据。这是不满足需求的，我们要从开始到结束每页的数据都是在十行以内的，不可以多。

开始我是这样改的：

<tr v-for="(items,index) of searched_list" :key="index" v-if="index <10">

但是，很明显，除了index<10的数据存在，其他的都不存在了。

然后我改成了v-show，它可以很好的满足我的条件，不会丢失数据，而且每页十行，刚刚好。

我的最后效果图：

PS：说一下v-show和v-if的区别吧：

扫描二维码关注公众号，回复： 5978934 查看本文章

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

小记：vue中实现table的分页功能

猜你喜欢