目录
1、官方文档:Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
效果
一、介绍
1、官方文档:Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
2、官方示例
二、准备工作
1、安装依赖包
# 选择一个你喜欢的包管理器
# NPM
$npm install ant-design-vue --save
#Yarn
$ yarn add ant-design-vue
注:也可以在浏览器中使用 script
和 link
标签直接引入文件,并使用全局变量 antd
。
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js
2、示例版本
"ant-design-vue": "^3.2.12",
三、使用步骤
1、在main.ts引入
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
app.use(Antd);
2、具体使用
const page = ref(1);
const pageSize = ref(2);
const totals = ref(0);
const paginationProp = ref({
showSizeChanger: true, // 是否展示 pageSize 切换器,当 total 大于 50 时默认为 true
showQuickJumper: true, // 是否可以快速跳转至某页
pageSize, // 每页条数
current: page, // 当前页数
total: totals, // 数据总数
showTotal: (totals) => `总 ${totals} 条数据`, // 用于显示数据总量和当前数据顺序
onChange: pageChange, // 页码或 pageSize 改变的回调,参数是改变后的页码及每页条数
onShowSizeChange: pageSizeChange, // pageSize 变化的回调
pageSizeOptions: ['2', '3'], // 指定每页可以显示多少条
});
四、完整示例
1、main.ts
import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App);
app.use(Antd);
app.mount("#app");
2、example.vue
<template>
<a-table
:columns="columns"
:data-source="tableData"
bordered
size="small"
:pagination="paginationProp" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const columns = [
{
title: '姓名',
dataIndex: 'name',
ellipsis: true,
},
{
title: '身高',
dataIndex: 'height',
ellipsis: true,
},
{
title: '体重',
dataIndex: 'weight',
ellipsis: true,
},
];
const tableData = ref<any>([
{
key: '1',
name: '张三',
height: 180,
weight: 165,
},
{
key: '2',
name: '李四',
height: 178,
weight: 146,
},
{
key: '3',
name: '王五',
height: 182,
weight: 168,
},
{
key: '4',
name: '赵六',
height: 185,
weight: 160,
},
]);
// 分页相关
const page = ref(1);
const pageSize = ref(2);
const totals = ref(0);
const paginationProp = ref({
showSizeChanger: true, // 是否展示 pageSize 切换器,当 total 大于 50 时默认为 true
showQuickJumper: true, // 是否可以快速跳转至某页
pageSize, // 每页条数
current: page, // 当前页数
total: totals, // 数据总数
showTotal: (totals) => `总 ${totals} 条数据`, // 用于显示数据总量和当前数据顺序
onChange: pageChange, // 页码或 pageSize 改变的回调,参数是改变后的页码及每页条数
onShowSizeChange: pageSizeChange, // pageSize 变化的回调
pageSizeOptions: ['2', '3'], // 指定每页可以显示多少条
});
function pageChange(p, pz) {
page.value = p;
pageSize.value = pz;
getDataList();
}
function pageSizeChange(current, size) {
page.value = current;
pageSize.value = size;
getDataList();
}
function getDataList() {
// 获取表格数据的接口地址({pageNo: page.value, pageSize: pageSize.value }).then((data) => {
// const { current, pages, size, total, records } = data
// if(current > pages) {
// page.value = pages;
// getDataList();
// } else {
// tableData.value = records;
// pageSize.value = size;
// totals.value = total;
// }
// })
}
// getDataList();
</script>
<style scoped>
:deep() .ant-table-cell {
text-align: center !important;
}
:deep() .ant-table-pagination.ant-pagination {
margin: 10px 0 0 0 !important;
}
</style>
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js