<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. JavaScript 数字与字符串的加减乘除运算

    点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.

  2. vxWidgets(二):接口文档

    第一章 介绍 在这一章中,我们会回答这样一些基本的问题:wxWidgets是什么,它和别的类似的开发库有什么不同.我们还会大概说一下这个项目的历史,以及wxWidgets社区的工作,它采用的许可协议, ...

  3. ORA-06502: PL/SQL: numeric or value error: character string buffer too small

    oracle执行报错 ORA-06502: PL/SQL: numeric or value error: character string buffer too small ORA-06512: a ...

  4. ES使用

    shards 分片数 ES存储数据可以存储在多个分片 下载ES curl -L -O https://artifacts.elastic.co/downloads/elasticsearch/elas ...

  5. drools规则的入门使用

    1:pom文件 <!--drools--><dependency> <groupId>org.drools</groupId> <artifact ...

  6. AFNI 教程 步骤5:统计和建模

    第一部分 时间序列 用AFNI打开fMRI数据, Graph按钮可以打开信号界面,中心的信号是该像素的信号随着时间的变化图,m 可以显示更少的体素,M可以显示更多的体素.V 可以浏览整个图像,+ 可以 ...

  7. Amd,Cmd, Commonjs, ES6 import/export的异同点

    Amd,Cmd, Commonjs, ES6 import/export等均是模块化方案 1.Commonjs使用在Nodejs上,加载模块是同步的. 2.Amd是requirejs在推广过程中对模块 ...

  8. element-ui学习之-------input表单验证【各种情况总结】

    1.非必填,正整数 2.非0开头正整数

  9. 无需联网,一键永久激活所有Windows/Office

    对于 Windows 激活工具,大家可能了解不多,熟悉的比如小马激活工具,因为激活工具从来都是病毒高发区,各种工具混在一起,一不小心,电脑就中招了. 今天介绍一款不一样的. R@1n ReBirth ...

  10. 【B站】B站计算集数时长,调节任意倍速

    打开浏览器,任意收藏一个网址,将URL替换为下面的代码并保存 打开任意B站视频页面,点击这个收藏的网址,即可在页面右边看到如下窗口 javascript: (function () { var hou ...