Ant Design Vue中的table与pagination的联合使用方式

目录
  • Ant Design Vue中table与pagination联合使用
  • ant.design.vue中table的使用说明
    • table的创建
    • table之columns
    • table之dataSource
    • table之loading
    • table之scroll
    • table之rowKey
    • table之rowSelection
    • table之customRow
    • table之change

Ant Design Vue中table与pagination联合使用

表格table使用链接:ant design vue : Table

分页pagination使用链接:ant design vue: Pagination

表格单独使用时,自带简单分页,只包含 上一页, 页面码, 下一页,例如:

但如果想要更加复杂的分页,例如显示总数,改变每页个数等等功能,则需要传入pagination参数来自定义,看代码:

<a-table :datasource="data"
	:columns="columns"
	:pagination="pagination"/>

<script>
const data=[...]
const columns=[...]
export default {
	data() {
		return {
			data,
			columns,
			pagination: {
				pageSize: 20, // 默认每页显示数量
				showSizeChanger: true, // 显示可改变每页数量
				pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
				showTotal: total => `Total ${total} items`, // 显示总数
				showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
			}
		}
	}
}
</script>

还有更多的配置可以自行设置,按照这个形式就好。

效果图:

ant.design.vue中table的使用说明

table的创建

<a-table
  :columns="columns" // 表头
  :dataSource="data" // 数据源
  :loading='loading' // 加载loading
  :pagination="pagination"  // 页脚
  :scroll="scroll" // 控制table的滚动
  :rowKey="setTableKey" // 每一行定义一个单独的key
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" // 
  :customRow="customClick" // 点击每一行的事件
  @change="handleTableChange" // 表格的change事件
  >
  <span slot="action" slot-scope="record">
     // slot="action" 插槽名
     // slot-scope="record" // 该插槽内部能搞抓取到的改行的数据
     // 也可展示改行对应的内容 {{ record.name }}
    <a href="javascript:;" rel="external nofollow"  rel="external nofollow"   @click.stop="editHandle(record)">编辑</a>
    <a-divider type="vertical"/>
    <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click.stop="deleteRecord(record)">删除</a>
  </span>
</a-table>

table之columns

表格的表头数据源

columns: [
  {
    title: '性别', // 该列展示的title
    dataIndex: 'sex', // 对应标志,与dataSource中数据匹配的标识符,支持"info.sex"的方式
    filters: [ // 筛选功能,该数组表示刷选的选项值,change事件获取的为 value,text为展示内容
      { text: '男', value: 'male' },
      { text: '女', value: 'female' },
    ],
    filterMultiple: false, // false为单选
    filteredValue: [], // 受控状态,加上它时,则需要在change事件中,手动的给它赋值,
    // 它表示选中的数据,对应的数据高亮,可以手动清除状态
  },
  {
    title: '登记日期',
    dataIndex: 'registDate', 
    sorter: true, // true,表示该列出现排序icon,在change事件中,能监听到对应的数据变化
  },
  {
    width: '100px', // 该列的宽度,支持百分比等
    title: '操作',
    key: 'action',
    dataIndex: '',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }, // customRender 对应table中的插槽名,可以在每行自定义展示的内容,
  },
],

table之dataSource

表格的数据源

[{
  id: '1',
  sex: 'John Brown',
  age: 32,
  registDate: '2019-05-09',
}]

table之loading

页面是否加载中

  • boolean
  • table之pagination
pagination: {
  // 分页配置器
  pageSize: 10, // 一页的数据限制
  current: 1, // 当前页
  total: 10, // 总数
  hideOnSinglePage: false, // 只有一页时是否隐藏分页器
  showQuickJumper: true, // 是否可以快速跳转至某页
  showSizeChanger: true, // 是否可以改变 pageSize
  pageSizeOptions: ['5', '10', '30'], // 指定每页可以显示多少条
  // onShowSizeChange: (current, pagesize) => { // 改变 pageSize时的回调
  //   this.pagination.current = current
  //   this.pagination.pageSize = pagesize
  //   ....
  // },
  // onChange: (current) => { // 切换分页时的回调,
  // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  //   this.pagination.current = current
  // },
  showTotal: total => `总数:${total}人`, // 可以展示总数
},

table之scroll

设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x 设置一个数字,如果要设置为 true,需要配合样式 .ant-table td { white-space: nowrap; }

{ x: number , y: number }

一般用于大数据展示时,让横向出现滚动的效果,主要用来兼容小屏幕

也可以固定某一列,在columns中对应的列添加fixed: 'right',

不过我们也可以动态的设置

// 在页面初始化的时候调用事件,去判断该如何展示
const screenWidth = document.body.clientWidth
if (screenWidth >= 1366 && this.screenWidth <= 1540) {
  this.scroll.x = '115%'
} else if (screenWidth < 1366) {
  this.scroll.x = '125%'
}

table之rowKey

表格行 key 的取值,可以是字符串或一个函数

处理多选至关重要一项,只有设置了该属性,多选时,选中的值才会出现对应的高亮

// table中使用
:rowKey={record => record.uid}
// 事件
setTableKey(record) {
  return record.id
}

table之rowSelection

列表项是否可选择,也就是通常的多选

  • selectedRowKeys:数组,受控的选中状态,可以通过它,手动添加选中行,当选中时,将已选中的数据赋值给该值;
  • onChange: 选中的change事件

table之customRow

设置行属性,已经对应的事件

// 点击行,展示对应的数据,写在data中
customClick: record => ({
  on: { // 事件
    click: () => {
      // 点击改行时要做的事情
      // ......
    },
  },
}),

table之change

分页、排序、筛选变化时触发

handleTableChange(pagination, filters, sorter) {
  console.log(pagination, filters, sorter)
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • Ant-design-vue Table组件customRow属性的使用说明

    官网示例 使用方式 // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定

  • 关于Ant-Design-Vue快速上手指南+排坑

    目录 前言 NO.1 表单组件 如何自定义表单校验规则 表单回显 提交表单 NO.2 表格(Table) NO.3 Spin组件 打包优化 结语 前言 公司要开发一个后台管理系统,对于UI库的选择上选择了颜值爆表的Ant-Design-Vue作为整个项目UI库,但谁曾想,暗中的坑一个接一个,文档也不怎么详细,可能习惯了element-ui的掘友们也许不怎么好适应,本文就带大家一起学习如何高效使用Ant-Design-Vue. NO.1 表单组件 首先就来说说最常用的Form组件的正确使用姿势:

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • Ant Design Vue中的table与pagination的联合使用方式

    目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用 表格table使用链接:ant desig

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • ant design vue 表格table 默认勾选几项的操作

    为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • Ant Design Vue table中列超长显示...并加提示语的实例

    我就废话不多说了,大家还是直接看代码吧~ <template> <a-row class="a-left"> <a-row> <p class="a-title">今日考勤状况</p> <a-row type="flex" justify="space-around"> <a-col :span="4" class="b

  • ant design vue的table取消自带分页问题

    目录 ant design vue的table取消自带分页 题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页 在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然

  • ant design vue datepicker日期选择器中文化操作

    按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')&q

随机推荐