无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

小程序制造过程共享_Vue开发之封装分页组件与使

时间:2021-01-07 14:21来源:小程序制造过程共享 作者:jianzhan 点击:
Vue开发设计之封裝分页查询部件与应用实例 本文关键详细介绍了Vue开发设计之封裝分页查询部件与应用,融合案例方式剖析了vue.js封裝分页查询部件实际操作及其应用部件开展分页
Vue开发之封装分页组件与使用示例       这篇文章主要介绍了Vue开发之封装分页组件与使用,结合实例形式分析了vue.js封装分页组件操作以及使用组件进行分页的相关实现技巧,需要的朋友可以参考下

本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考,具体如下:

使用elementui中的el-pagination来封装分页组件

pagination.vue:

 template 
 div 
 el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
 :current-page="page.page" :page-sizes="pageSizes" :page-size="page.limit"
 layout="total, sizes, prev, pager, next, jumper" :total="total" 
 /el-pagination 
 /div 
 /template 
 script 
export default {
 pro凡科抠图: {
 total: {
 type: Number
 } // 总条数
 data() {
 return {
 pageSizes: [10, 20, 50, 100],
 page: {
 page: 1,
 limit: 10
 methods: {
 // 每页条数变更
 handleSizeChange(val) {
 this.page.limit = val;
 this.$emit('pageChange', this.page);
 // 当前页码变更
 handleCurrentChange(val) {
 this.page.page = val;
 this.$emit('pageChange', this.page);
 /script 
 style 
.pagination {
 margin: 20px 0;
 /style 

使用创建的分页组件

 pagination :total="total" @pageChange="pageChange" /pagination 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信