在template

<template>
<div class="Terminal" v-loading="loading">
<!-- 查询操作 -->
<div class="select">
<el-form :label-position="'left'">
<el-form-item label="所属门店:">
<el-select v-model="merchantNo" placeholder="请选择" class="city-select">
<el-option label="全部" value="" />
<el-option v-for="item in provinceOption" :key="item.key" :label="item.merchantShortName" :value="item.merchantNo" />
</el-select>
</el-form-item>
<el-form-item label="终端编号:">
<el-input v-model="posDeviceId" />
</el-form-item>
<el-button @click="Search">查询</el-button>
</el-form>
</div>
<!-- 表格 -->
<div class="store-table">
<el-table :data="tableData" style="width: 100%" header-row-class-name="table-title">
<el-table-column label="终端编号">
<template slot-scope="scope">
{{ scope.row.posDeviceId }}
</template>
</el-table-column>
<el-table-column label="品牌型号">
<template slot-scope="scope">
{{ scope.row.brand }}
<!-- <span v-if="scope.row.brand == '01'">百福</span>
<span v-if="scope.row.brand == '06'">惠尔丰</span> -->
</template>
</el-table-column>
<el-table-column label="所属门店">
<template slot-scope="scope">
{{ scope.row.merchantName }}
</template>
</el-table-column>
<el-table-column label="门店类型">
<template slot-scope="scope">
<span v-if="scope.row.merchantType == '1'">普通商户</span>
<span v-if="scope.row.merchantType == '2'">连锁总店</span>
<span v-if="scope.row.merchantType == '3'">连锁分店独立营业执照</span>
<span v-if="scope.row.merchantType == '4'">连锁分店无营业执照</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination background layout="prev, pager, next, jumper, sizes" :current-page="startPage" :prev-text="prev" :next-text="next" :page-sizes="pagesizearrray" :page-size="pageSize" :total="totalNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>

</div>
</div>
</template>

在script

export default {
data() {
return {
startPage: ,
// 每页的数据
pageSize: ,
pagesizearrray: [, , , ],
totalNum: ,
tableData: [],
prev: this.$t('personal.prev'), // 上一页
next: this.$t('personal.next'), // 下一页
}
},
}

在methods

 methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange(size) {
this.pageSize = size
this.handleUserList()
},
handleCurrentChange(startPage) {
this.startPage = startPage
this.handleUserList()
},
handleUserList() {
  // 这个是接口的调用
getpos({
posDeviceId: '',
merchantNo: '',
startPage: this.startPage,
pageSize: this.pageSize,
innerMain: ,
}).then((res) => {
// console.log(res, '表格数据')
if (res.code === '') {
this.loading = false
if (res.data) {
this.tableData = res.data.list
      //分页处理  
this.totalNum = res.data.totalCount
this.totalCount = res.data.totalCount
} else {
this.tableData = []
this.totalCount =
}
}
})
},

最后在moutend或created中进行调用数据

this.handleUserList()
 
 
注意这是element中的分页 里面的数据和接口和调换成你自己的。要不然会报错的

element中的分页的更多相关文章

  1. tp中使用分页技术

    1 public function showList() { $m_ld = D ( 'guangxi_ld' ); $page = I ( 'get.p', 1 ); // 在配置中获取分页值 $p ...

  2. Oracle中经典分页代码!

    在Oracle中因为没有top关键字,所以在sqlserver中的分页代码并不适用于Oracle,那么在Oracle中如何来实现分页呢? --查询所有数据 STUNO STUNAME STUAGE S ...

  3. 在yii中使用分页

    yii中使用分页很方便,如下两种方法: 在控制器中: 1. $criteria = new CDbCriteria(); //new cdbcriteria数据库$criteria->id = ...

  4. [数据库]Oracle和mysql中的分页总结

    Mysql中的分页 物理分页 •在sql查询时,从数据库只检索分页需要的数据 •通常不同的数据库有着不同的物理分页语句 •mysql物理分页,采用limit关键字 •例如:检索11-20条 selec ...

  5. LigerUi中的Grid中不分页显示(local)!

    LigerUi中的Grid中不分页显示! grid为local usePager: true,                         //是否分页

  6. ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习(实例)

    经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...

  7. mongo中的分页查询

    /** * @param $uid * @param $app_id * @param $start_time * @param $end_time * @param $start_page * @p ...

  8. springboot中使用分页,文件上传,jquery的具体步骤(持续更新)

    分页: pom.xml     加依赖 <dependency> <groupId>com.github.pagehelper</groupId> <arti ...

  9. restful中的分页

    普通分页 普通分页类似于Django中的分页 源码 class PageNumberPagination(BasePagination): """ A simple pa ...

随机推荐

  1. fastadmin弹窗效果表单

    在项目所对应的js文件中的 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', s ...

  2. rabbitmq系列问题解决:406, "PRECONDITION_FAILED - inequivalent arg 'durable'

    1. 安装rabbitmq,查看官网文档: https://www.rabbitmq.com/#getstarted 由于我是先安装了rabbitmq后自己随手创建了queue,后面又按照官方给的&q ...

  3. 牛客CSP-S提高组赛前集训营5 赛后总结

    A.无形的博弈 心理题. 答案为\(2^n\),可感性理解结论的正确性. #include<bits/stdc++.h> #define LL long long const LL Mod ...

  4. web 项目添加 x86 的dll 引用,模块 DLL c:\WINDOWS\system32\inetsrv\aspnetcore.dll 未能加载。

    最近的项目要添加一个 x86 编译的dll, 首先添加引用,编译,报错: 首先判断是 项目中不能添加 x86 的引用,所以把所有的项目都按照 x86 的方式编译一遍,同时对应IIS 的应用池,也修改为 ...

  5. BK: Data mining: concepts and techniques (1)

    Chapter 1 data mining is knowledge discovery from data; The knowledge discovery process is an iterat ...

  6. Linux下搭建PHP环境的参考文章小记

    之前也在Linux上安装过两次,但是当我再次需要安装时,还是很多不懂的地方,于是记下此篇,以防下次再费经心思找到不合适的文章,瞎折腾. 通过参考这几篇文章,成功的安装好了自己的PHP(LNMP)环境. ...

  7. 【Linux】iptables相关实践,原理及参数解释

    1.禁止指定IP地址的主机进行连接 iptables -I INPUT -s .***.***. -j DROP 2.解除禁止指定IP地址的主机进行连接 iptables -D INPUT -s .* ...

  8. 05 部署mysql关系数据库

    01 安装Mysql 在官网https://dev.mysql.com/上找到自己需要的版本并执行安装 sudo apt-get install mysql-server-5.7 02 运行和退出 # ...

  9. 题解【Vijos1159】岳麓山上打水

    题面 迭代加深搜索模板题. 注意开始时要先对桶的容量从小到大排序. 达到搜索层数时使用完全背包\(\text{check}\)即可. 具体实现参考代码. #include <bits/stdc+ ...

  10. [CF755B] PolandBall and Game - 博弈论

    [CF755B] Description 两个人轮流说单词,每个人只能说自己的的单词库里的单词.被任意方说过的单词不能再说.一个单词只会在某个人的单词库中出现一次,但是可能同时出现在两个人的单词库中. ...