<template>
      <a-table
        :pagination="ipagination"
        @change="handleTableChange"
        :columns="columns"
        :row-selection="rowSelection"
        :data-source="dataList"
        rowKey="code"
        :scroll="{ x: 500, y: 250 }"
      >
      </a-table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'userName',
          align: "center",
        },
        {
          title: '手机号',
          dataIndex: 'telphone',
          align: "center",
        },
      ],//表头
      dataList: [
        {
          updateTime: '2022',
          userName: '小林',
          code: '1',
          telphone: '11111111111',
        },
        {
          updateTime: '2022',
          userName: '小黄',
          code: '2',
          telphone: '12222222222'
        },
      ],//表格
      selectList: [],//选择列表
      selectedRowKeys: [],
      ipagination:{
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
      pageSize:10,
      pageNum:1,
    }
  },
  computed: {
    rowSelection() {
      return {
        //onChange方法,rowSelection改变时触发
        onChange: (selectedRowKeys, list) => {
          //获取选中行的key元素,和下面selectedRowKeys属性配合使用,表示给rowSelection绑定一个v-model,为this.selectedRowKeys
          this.selectedRowKeys = selectedRowKeys
          //获取选中的行的所有元素
          this.selectList = list
        },
        selectedRowKeys: this.selectedRowKeys
      }
    }
  },
  methods: {
    handleTableChange(val){//分页
      this.pageSize=val.pageSize
      this.pageNum=val.pageNum
    }
  }
}
</script>
<style scoped>
</style>

antDesignVue表格的更多相关文章

  1. [ vue ] xxxProject项目杂记

    2020.4.9 加入eCharts 2020.4.8 完成article的显示,其间碰到全局路由守卫写的有错误,导致跳转报错.已修复. 加入keep-alive功能,缓存视图数据 疑问:如果在全局组 ...

  2. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  3. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. jQuery学习之路(6)- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  5. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  6. DOM的小练习,两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  7. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  8. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  9. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  10. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

随机推荐

  1. JS日期时间增加减少

    new Date().add(Date.MONTH, +3).format('Y-m-d')  // 加三个月 new Date().add(Date.MONTH, -3).format('Y-m-d ...

  2. MYSQL启动:'服务没有相应控制功能'问题解决

    启动 MySQL 服务,此处若是显示错误'服务没有相应控制功能' 尝试解决方法:访问如下网站: https://cn.dll-files.com/vcruntime140_1.dll.html  下载 ...

  3. [2002年NOIP普及组] 选数

    已知 n 个整数 x1,x2,-,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k=3,4 个整数分别为 3,7,12,19 时, ...

  4. Gitbook部署

    title: Gitbook部署 # 标题 date: 2020-06-14 08:00:00 借助Gitbook,写自己的第一本电子书 Gitbook部署 一.电脑环境 Git 环境,我的电脑上已经 ...

  5. C语言标准 —— C89(C90)、C99、C11、C17、C2X

    https://blog.csdn.net/u010217055/article/details/128957497

  6. 掌控安全学院SQL注入靶场宽字节注入

    在php中,magic_quotes_gpc这个函数为on时,就开启了转义功能,另外addslashes和mysql_real_escape_string也可以实现转义功能.可转移的的内容包括:单双引 ...

  7. 《这里分别闭合离合器Zm和Z2会分别有什么效果》 回复

    <这里分别闭合离合器Zm和Z2会分别有什么效果>       https://tieba.baidu.com/p/8246021959       .

  8. Kubernetes理论知识

    一.k8s概念 Kubernetes(k8s)是跨主机集群的自动部署.扩展以及运行应用程序容器的开源平台,这些操作包括部署,调度和节点集群间扩展. master node:主节点 Master 是 C ...

  9. 戴尔n4110在win7下无法使用virtualbox的解决方法(应该对win7都有用)

    正文 因为已经学了一段时间的汇编了嘛,想着就拿单独一台机器出来学汇编好了,刚好趁着天气降温回学校拿被子的机会把笔记本也拿出来了,然后我装上了virtual box,把编译好的文件写到虚拟盘中,打开就直 ...

  10. JVM中的GC系统

    什么是GC? GC(Garbage Collection)称之为垃圾回收,在JVM的执行引擎中自带这样的一个GC系统,此系统会按照一定的算法对内存进行监控和垃圾回收. 如何判断哪些对象是垃圾? 1.引 ...