前言
最近在写一个新项目,UI框架用的是 Ant Design Vue
,因为之前一直用的 Element UI
,没有用过这个组件库,没想到二者区别这么大,因此踩了不少坑,其中就有 Table
和 Pagination
,花了一会时间才弄明白,在此记录并分享一下此次经历。
注意:是 Vue3 项目。
一、Table 表格
Table
的使用相对比较简单,与 Element
不同的是,它不需要写很多的标签,主要通过数据来改变列表显示。
表格的列标题和数据分别用 columns
、data
两个数组来控制,命名随意。分别将其传给表格的 columns
、data-source
对象即可。
注意:数组中的 key 值是有一定要求的,如 标题必须为 title
, columns
的 key
是 data
中的值的名字等。具体的字段名称就要去看官方文档了,本文就不做赘述了。
<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>
上面只是正常的数据展示,但是有些时候我们需要做一些逻辑处理,比如按钮什么的,这种情况下就需要使用 <template></template>
进行处理。
需要注意的是,这里需要两层<template></template>
,外面一层是一个具名插槽,需要处理的是 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: '测试',
}])
</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 分页
通过上面的代码可以发现,表格中并未使用分页组件,但是页码依然展示出来了,你可能会觉得这很方便,但实际上,这样的方式,会让很多功能都无法实现。因此,需要对分页进行定制处理。
与 Table
相同,分页同样是通过数据去控制,因为表格默认已经使用了分页,所以无需额外引入。但是需要在表格上添加 :pagination="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>
分页的配置项有很多,具体参考官方文档 Pagination 分页。文章来源:https://www.toymoban.com/news/detail-496496.html
END文章来源地址https://www.toymoban.com/news/detail-496496.html
到了这里,关于Ant Design Vue表格(Table)及分页(Pagination )使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!