以上就是给各位分享AntDesignVue分页Pagination，其中也会对antdesignvue分页表格怎么做进行解释，同时本文还将给你拓展1分2分5分硬币价格laravel5分页Paginat
以上就是给各位分享Ant Design Vue分页Pagination，其中也会对ant design vue分页表格怎么做进行解释，同时本文还将给你拓展1分2分5分硬币价格 laravel5分页Pagination及扩展、Ant Design Pro 使用更多 Ant Design of Vue 组件、Ant Design Vue中的table与pagination的联合使用方式、ant-design-vue a-table 的分页等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：- Ant Design Vue分页Pagination（ant design vue分页表格怎么做）
- 1分2分5分硬币价格 laravel5分页Pagination及扩展
- Ant Design Pro 使用更多 Ant Design of Vue 组件
- Ant Design Vue中的table与pagination的联合使用方式
- ant-design-vue a-table 的分页
Ant Design Vue分页Pagination（ant design vue分页表格怎么做）
<template>
<div>
<a-pagination
show-quick-jumper
v-model:current="current1"
:total="500"
@change="onChange"
/>
</div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue'
export default defineComponent({
setup() {
const current1 = ref<number>(1)
const onChange = (pageNumber: number) => {
console.log('Page: ',pageNumber)
}
return {
current1,onChange,}
},})
</script>
1分2分5分硬币价格 laravel5分页Pagination及扩展
Ant Design Pro 使用更多 Ant Design of Vue 组件
- 因为 Ant Design Pro 是按需加载的，Ant Design of Vue 中的部分组件未默认引用，故需要手工添加到项目中。
- 这里以 Pagination 这个分页组件为例。首先在项目中找到文件 \src\core\lazy_lib\components_use.js
- 增加如下两个代码
import { ..... // 增加 Pagination } from ''ant-design-vue''// 增加 Vue.use(Pagination) - 至此，页面中即可使用该组件
Ant Design Vue中的table与pagination的联合使用方式
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事件-
设置行属性，已经对应的事件
// 点击行，展示对应的数据,写在data中 customClick: record => ({ on: { // 事件 click: () => { // 点击改行时要做的事情 // ...... }, }, }),table之customRow
-
分页、排序、筛选变化时触发
handleTableChange(pagination, filters, sorter) { console.log(pagination, filters, sorter) }
ant-design-vue a-table 的分页
<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;
});
},
原文链接： cnblogs.com/lvlvlv/p/11543575.html
今天关于Ant Design Vue分页Pagination和ant design vue分页表格怎么做的介绍到此结束，谢谢您的阅读，有关1分2分5分硬币价格 laravel5分页Pagination及扩展、Ant Design Pro 使用更多 Ant Design of Vue 组件、Ant Design Vue中的table与pagination的联合使用方式、ant-design-vue a-table 的分页等更多相关知识的信息可以在本站进行查询。
本文标签：
