Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



iView Cook Book - 分页组件

2018-11-21 » 没填完的坑 / Tutorial , Vuejs

本文基于 iView 2.0, 官网地址: http://v2.iviewui.com/docs/guide/install

本文将着重介绍自己在类 CMS 系统的开发中,针对 <Page> 组件, 在使用过程中遇到的问题, 以及解决方案.

分页乱码

这个问题出现几率不算太高,比较偶发,也有人在提过相应 issues:分页控件显示乱码 #828

被 Closed 掉之前,都没有回复,感觉大家都像没遇到过这个问题一样。后来我对比了一下 element-ui,发现了这两套分页组件显示 “•••”这个东东的时候,两边处理的方式不一样。

在 iview 中(现在官网的样式已经改过来了,不过 issuse 上面我有截图为证!)cheeky

.ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after {
    content: "•••";
}

在 element-ui 中:

.el-icon-more:before {
    content: "\E646";
}

就和我在回复中写道的,content 对中文支持不好,我们将全角符 unicode 后再使用即可。

on-page-size-change

切换每页条数时的回调,返回切换后的每页条数。

可能切换分页条数,平时比较少遇到,但是 iView 的这个 event,个人觉得在设计时,有些不合理。

./node_modules/iview/src/components/page/page.vue 261 行代码,你会看到 Page 组件内部 $emit 该事件的函数:

onSize (pageSize) {
    this.currentPageSize = pageSize;
    this.$emit('on-page-size-change', pageSize);
    this.changePage(1);
},

是的,在该函数中,它首先 $emit on-page-size-change 事件,而后,又调用了 changePage(1),changePage(1),会将 current 这个 prop 赋值为 1,进而会触发 on-page-change 事件。

通常我们在使用 Page 组件时,会同时监听 on-page-size-change 和 on-page-change,并且会在相应的函数中,去重新调用接口拉取数据。

<Page
    :current.sync="current"
    @on-page-change="loadData"
    @on-page-size-change="loadData(true)"
    // ... 其他一些 props
     >
</Page>

显然,只要“每页显示条码”change 了,就会触发 on-page-size-change,那么 loadData 也会被调用;

但是 on-page-size-change 又会同时触发 on-page-change,那么 loadData 又会被调用一次。

所以,在使用 Page 组件时,我的做法是,不开启 page-size 这个 prop,而是用 Select 组件与 Page 组件二次封装成“带有每页条码切换的分页组件”:

<Row type="flex" class="pagination-wrapper">

    <Col span="2" class="page-size-wrapper">
        <Select class="page-size-selector"
            v-model="pagination.pageSize"
            @on-change="handlePageSizeChange">
            <Option 
                v-for="item in pagination.pageSizeOpts" 
                :value="item" 
                :key="item">
                {{ `${item} 条/页` }}
            </Option>
        </Select>
    </Col>

    <Col span="22" class="page-wrapper">
        <Page
            :current.sync="pagination.current"
            :total="pagination.total"
            :page-size="pagination.pageSize"
            show-total
            show-elevator
           @on-change="handlePageChange">
        </Page>
     </Col>

</Row>

补充

如果你使用 Chrome, 谷歌翻译, 也会对分页组件造成一些 BUG, 关闭掉谷歌翻译即可, 例如: