在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. 针对wordpress CMS的信息收集

    如果发现一个站点用的是wordpress管理系统的话, 可以试试默认的后台地址:/wp-admin/ 访问后自动跳转置 后台登录界面 用户名收集 :/?author=1 依次访问/author=1 , ...

  2. asm相关内容想下载(包括 jar 包)

    网址:http://download.forge.ow2.org/asm/

  3. 开发过程中遇到的代理Proxy配置问题

    proxy代理问题 在公司不能访问外网的时候,使用IDEA开发.. 需要配置IDEA Proxy Maven Git IDEA开发工具Proxy配置,使用Spring Boot快读构建工具 Maven ...

  4. 在Unity5中使用C#脚本实现UI的下滑、变色、渐隐渐现效果

    一.首先,我们先创建一个Text    依次选择Component→UI→Text创建一个Text,创建完成后如下: 二.创建完成后,在Project面板点击Create→C# Script,本例命名 ...

  5. MySQL主键设计盘点

    目录 主键定义 主键设计和应用原则 主键生成策略 自增ID UUID 自建的id生成器 Twitter的snowflake算法 @ 最近在项目中用了UUID的方式生成主键,一开始只是想把这种UUID的 ...

  6. AntDesign(React)学习-12 使用Table

    AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...

  7. JDBC——抽取工具类

    目的:简化书写 分析: 1.注册驱动 2.获取连接对象 3.释放资源 1.注册驱动 2.获取连接对象 需求:不想传递参数,还能保证工具类的通用性解决方案:配置文件 jdbc.properties ur ...

  8. yii2验证规则

    验证规则 1.内置验证规则 [['sex', 'partner_id'], 'integer'], [['partner_id', 'camp_id',], 'required'], [['creat ...

  9. ASP.NET Process Model之二:ASP.NET Http Runtime Pipeline[上篇]

    链接:https://www.cnblogs.com/artech/archive/2007/09/13/891262.html 相信大家都使用过ASP.NET进行过基于Web的应用开发,ASP.NE ...

  10. PVE上安装黑裙辉6.2

    参考文章:https://post.smzdm.com/p/a25r8mo2/ http://www.myxzy.com/post-488.html 环境介绍 1.Proxmox VE(以下简称PVE ...