文档章节

vue ant design a-table 的分页

o
 osc_isezqdgg
发布于 2019/09/18 16:53
字数 233
阅读 27
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<a-table
        :columns="columns"       //列
        :dataSource="tableDatas"  //数据
        :loading="loading"
        :pagination="pagination"  //分页属性
        @change="handleTableChange"//点击分页中数字时触发的方法
        :rowKey="tableDatas => tableDatas.id"    //每一行的标识
      >
        <span slot="action" slot-scope="text, record">  //放表格中操作的按钮
          <div class="tabBtn" >
            <a-popover placement="bottomRight" overlayClassName="tableBtn">
              <template slot="title">
                <a href="javascript:;" @click="handleAdd(record)" >
                  <i class="iconfont icon-table-edit" />编辑
                </a>
                <a href="javascript:;" @click="deleHostData(record)">
                  <i class="iconfont icon-tableEmpty" />删除
                </a>
              </template>
              <span>
                <i class="iconfont icon-tableMore" />
              </span>
            </a-popover>
          </div>
        </span>
      </a-table>
//data中的数据
data() { return { pagination: { total: 0, pageSize: 10,//每页中显示10条数据 showSizeChanger: true, pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据 showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据 },
loading: true, // 查询参数 queryParam: { page: 1,//第几页 size: 10,//每页中显示数据的条数 hosName: "", hosCode: "", province: "", city: "" }, };
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.getTableList();
    },
//调用查询接口为dataSource 赋值
    getTableList() {
      this.loading = true;
      retriveHosData(this.queryParam).then(res => {
        if (res.message === "SUCCESS") {
          const pagination = { ...this.pagination };
          pagination.total = res.data.total;
          this.tableDatas = res.data.list;
          this.pagination = pagination;
        }
        this.loading = false;
      });
    },
 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Ant Design of Vue快速开发网页

Ant Design of Vue 这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。 特性 # 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享Ant Design of R...

osc_r1gtal48
2019/04/30
184
0
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
2019/01/23
4.3K
0
Sendya/ant-design-pro-vue

Ant Design Pro Vue An out-of-box UI solution for enterprise applications as a Vue boilerplate. based onAnt Design of Vue Overview 基于 Ant Design of Vue 实现的 Ant Design Pro V......

Sendya
2018/12/20
0
0
ant-design 模块引入

使用babel-plugin-import vue-cli3 中修改 label.config.js src/main.js 中 总结: 使用label-plugin-import 可通过 { module } 方式局部引入并自动引入相应样式,无需另外引入 antd.css imp...

笨鸟怎么也得飞一飞
2019/10/17
0
0
Ant Design Vue

我对于Vue会更加熟悉一点。Ant Desing是基于Reat来实现的。要不还有一套是Angular的实现。Ant Design of Vue vueComponent / ant-design-vue...

miaojiangmin
2018/10/30
502
0

没有更多内容

加载失败,请刷新页面

加载更多

写技术博客的一些心得体会

目录 1. 是什么 2. 为什么 2.1. 优秀的学习方法 2.2. 知识的备份 2.3. 体系的形成 2.4. 知识的交流 2.5. 写作能力和思维能力 3. 怎么做 1. 是什么 不知不觉已经写了近百篇技术博文了,其实在...

osc_873fteab
22分钟前
9
0
android组件间共享数据的常用方法

使用Intent在激活组件的时候携带数据,以进行数据的传递 使用广播进行组件间数据的伟递 使用外部存储(sharedPreference,文件,数据库,网络)进行组件间数据共享 使用Static静态成员进行数...

osc_sdnu59mg
23分钟前
20
0
Chrome浏览器的插件扩展默认安装目录

1:打开谷歌浏览器在地址栏输入:chrome://version 并回车 2:如上图个人资料路径,该路径下的Extensions文件夹即默认的插件安装目录:

osc_zg8wy3xa
25分钟前
23
0
知识圈APP开发记录(二十一)

今日完成:新增学习情况概览功能 花费时间:4小时 剩余时间:2小时 遇到问题:图标刷新时X轴成倍数刷新(已解决) 部分代码截图: 明日将完成:个性化模块及其附属功能测试

osc_bodzcw38
26分钟前
19
0
在做python大作业自己设计学生信息管理的增删改查操作遇到的问题

数据库的创建 conn = sqlite3.connect('student1.db') """ #在该数据库下创建学生信息表 conn.execute ('''CREATE TABLE StudentTable( ID INTEGER PRIMARY KEY AUTOINCREMENT, StuId INTEGE......

osc_7dwwmolq
27分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部