前言
最近在寫一個(gè)新項(xiàng)目，UI框架用的是 Ant Design Vue，因?yàn)橹耙恢庇玫?Element UI，沒有用過(guò)這個(gè)組件庫(kù)，沒想到二者區(qū)別這么大，因此踩了不少坑，其中就有 Table 和 Pagination，花了一會(huì)時(shí)間才弄明白，在此記錄并分享一下此次經(jīng)歷。
注意：是 Vue3 項(xiàng)目。
一、Table 表格
Table 的使用相對(duì)比較簡(jiǎn)單，與 Element 不同的是，它不需要寫很多的標(biāo)簽，主要通過(guò)數(shù)據(jù)來(lái)改變列表顯示。
表格的列標(biāo)題和數(shù)據(jù)分別用 columns、data 兩個(gè)數(shù)組來(lái)控制，命名隨意。分別將其傳給表格的 columns、data-source對(duì)象即可。
注意：數(shù)組中的 key 值是有一定要求的，如 標(biāo)題必須為 title， columns 的 key 是 data 中的值的名字等。具體的字段名稱就要去看官方文檔了，本文就不做贅述了。
<script setup lang='ts'>
import { ref } from 'vue';
const columns = ref([{
title: '標(biāo)題',
dataIndex: 'name',
key: 'name',
},{
title: '時(shí)間',
dataIndex: 'date',
key: 'date',
}])
const data = ref([{
key: 1,
name: 'Ant Design Vue表格',
year: '2023年',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination"></a-table>
</template>
上面只是正常的數(shù)據(jù)展示，但是有些時(shí)候我們需要做一些邏輯處理，比如按鈕什么的，這種情況下就需要使用 <template></template>進(jìn)行處理。
需要注意的是，這里需要兩層<template></template>，外面一層是一個(gè)具名插槽，需要處理的是 body ，因此需要加上 #bodyCell="{ column }"。
.vue
<script setup lang='ts'>
import { ref } from 'vue';
const columns = ref([{
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}])
const data = ref([{
key: 1,
name: '測(cè)試',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination">
<template #bodyCell="{ column }">
<template v-if="column.key === 'status'">
<dsa-tag type="warn">已完成</dsa-tag>
</template>
<template v-else-if="column.key === 'operate'">
<a class="button">編輯</a>
</template>
</template>
</a-table>
</template>
二、Pagination 分頁(yè)
通過(guò)上面的代碼可以發(fā)現(xiàn)，表格中并未使用分頁(yè)組件，但是頁(yè)碼依然展示出來(lái)了，你可能會(huì)覺得這很方便，但實(shí)際上，這樣的方式，會(huì)讓很多功能都無(wú)法實(shí)現(xiàn)。因此，需要對(duì)分頁(yè)進(jìn)行定制處理。
與 Table 相同，分頁(yè)同樣是通過(guò)數(shù)據(jù)去控制，因?yàn)楸砀衲J(rèn)已經(jīng)使用了分頁(yè)，所以無(wú)需額外引入。但是需要在表格上添加 :pagination="pagination" ，指定控制分頁(yè)的數(shù)據(jù)。
.vue
<script setup lang='ts'>
import { ref } from 'vue';
const pagination = ref({
current: 1,
defaultPageSize: 10,
total: 11,
showTotal: () => `共 ${11} 條`
})
const columns = ref([{
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}, {
title: '考核名稱',
dataIndex: 'name',
key: 'name',
}])
const data = ref([{
key: 1,
name: '測(cè)試',
}])
</script>
<template>
<a-table :columns="columns" :data-source="data" :pagination="pagination">
<template #bodyCell="{ column }">
<template v-if="column.key === 'status'">
<dsa-tag type="warn">已完成</dsa-tag>
</template>
<template v-else-if="column.key === 'operate'">
<a class="button">編輯</a>
</template>
</template>
</a-table>
</template>
分頁(yè)的配置項(xiàng)有很多，具體參考官方文檔 Pagination 分頁(yè)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-496496.html
END文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-496496.html
到了這里，關(guān)于Ant Design Vue表格（Table）及分頁(yè)（Pagination ）使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
