Ant Design Vue表格(Table)及分页(Pagination )使用

这篇具有很好参考价值的文章主要介绍了Ant Design Vue表格(Table)及分页(Pagination )使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近在写一个新项目,UI框架用的是 Ant Design Vue,因为之前一直用的 Element UI,没有用过这个组件库,没想到二者区别这么大,因此踩了不少坑,其中就有 TablePagination,花了一会时间才弄明白,在此记录并分享一下此次经历。

注意:是 Vue3 项目。

一、Table 表格

Table 的使用相对比较简单,与 Element 不同的是,它不需要写很多的标签,主要通过数据来改变列表显示。

表格的列标题和数据分别用 columnsdata 两个数组来控制,命名随意。分别将其传给表格的 columnsdata-source对象即可。

注意:数组中的 key 值是有一定要求的,如 标题必须为 titlecolumnskeydata 中的值的名字等。具体的字段名称就要去看官方文档了,本文就不做赘述了。

<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>

Ant Design Vue表格(Table)及分页(Pagination )使用

上面只是正常的数据展示,但是有些时候我们需要做一些逻辑处理,比如按钮什么的,这种情况下就需要使用 <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>

Ant Design Vue表格(Table)及分页(Pagination )使用

二、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 分页。

END文章来源地址https://www.toymoban.com/news/detail-496496.html

到了这里,关于Ant Design Vue表格(Table)及分页(Pagination )使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 保姆级教程:Ant Design Vue中 a-table 嵌套子表格

    前端为Ant Design Vue 版本为1.6.2,使用的是vue2 Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 下图为官网图,会在每行最前面多一个加号,点击后会展开,看到子表格的数据 子格嵌套从代码层简

    2024年02月01日
    浏览(61)
  • Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法详解

    在使用 Ant Design Vue 开发时,有时需要将 Table 表格中的数字类型字段转换为对应的文字表示,以提供更直观的数据展示。本文将详细介绍在 Ant Design Vue 中将 Table 表格中的数字类型转换为文字的方法,帮助您灵活地处理数据展示需求。 在实际的应用中,我们经常会遇到需要将

    2024年02月11日
    浏览(44)
  • Table 表格 + Pagination 分页

    Pagination分页 scroll-to.js

    2024年02月02日
    浏览(113)
  • vue3 组合式 ant.design组件Table嵌套表格,从后端获取数据并动态渲染

    在根据官方文档使用ant.design中的嵌套表格时,发现官方文档很多地方都不够详细。在过程中踩了不少坑,例如: 子表如何获取父表的数据? 如何获取子表的行索引? 如何让子表的数据源来自父表该行的数据? 总之,最后还是磕磕绊绊做完了功能,于是第一时间把代码整理

    2024年02月15日
    浏览(46)
  • 【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍

    接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件 Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 接下来

    2024年02月02日
    浏览(44)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)
  • vue的h渲染函数和customRender在ant design vue的table组件的使用

    使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了 因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法 这个时候我们可以使用组件列表 columns 说明的 customRender 属性来简化这一

    2024年02月13日
    浏览(48)
  • 如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。

        需求:拉下菜单中数据过多,200条以上,就会导致select组件卡死。所以需要使用滑动到底部使其分页加载     可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现:     1、在组件中绑定 @popupScro

    2023年04月20日
    浏览(54)
  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(54)
  • Ant Design Vue 修改表格头部样式

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。 首先用到的是 customHeaderRow 这个API,类型是一个函数 此图是 console.log(conlumn); 打印出来的 可以看到每一列都有一个className

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包