foreword
Recently, I was writing a new project. I used the UI framework Ant Design Vue, because I have been using it before Element UI, and I have never used this component library. I didn’t expect the difference between the two to be so big, so I stepped on a lot of pitfalls, including Tableand Pagination, which took a while. Time to figure it out, record and share this experience here.
Note: It is a Vue3 project.
1. Table form
TableThe use of is relatively simple. Unlike Element, it does not need to write a lot of tags, and mainly changes the list display through data.
The column title and data of the table are controlled by two arrays, and the names are arbitrary columns. dataJust pass it to the form columnsand data-sourceobject respectively.
Note: The key value in the array has certain requirements, such as the title must be title, columnsthe keyis datathe name of the value in and so on. The specific field names have to go to the official documentation, so I won’t go into details in this article.
<script setup lang='ts'>
import {
ref } from 'vue';
const columns = ref([{
title: '标题',
dataIndex: 'name',
key: 'name',
},{
title: '时间',
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>
The above is just a normal data display, but sometimes we need to do some logic processing, such as buttons, in this case, we need to use it for <template></template>processing.
It should be noted that two layers are required here <template></template>, and the outer layer is a named slot, which needs to be processed body, so it needs to be added #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: '测试',
}])
</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>
Two, Pagination pagination
From the above code, it can be found that the pagination component is not used in the table, but the page number is still displayed. You may find this very convenient, but in fact, many functions cannot be realized in this way. Therefore, custom handling of pagination is required.
Same as Table, paging is also controlled by data, because the table already uses paging by default, so there is no need to introduce it additionally. But it needs to be added to the table :pagination="pagination"to specify the data to control pagination.
.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: '测试',
}])
</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>
There are many configuration items for pagination, please refer to the official document Pagination pagination for details .
END