vue + antd 表格应用

最新推荐文章于 2025-06-04 11:22:55 发布

Meetyouhere

最新推荐文章于 2025-06-04 11:22:55 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏： vue antd table

本文链接：https://blog.youkuaiyun.com/Meetyouhere/article/details/113537988

vue 同时被 3 个专栏收录

2 篇文章

订阅专栏

antd

1 篇文章

订阅专栏

table

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Antd的表格组件，并实现自定义操作列及分页配置。通过示例展示了如何设置表格列、绑定操作链接以及配置分页插件等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue + antd 使用 antd的表格组件，并在表格最后一列添加操作列

第一步在cloumns 中添加

{
          title: 'AOD File',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          width: 160
}

第二步写一个插槽 slot 的值和第一步中的dataIndex对应

<a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange" :loading="loading">

 <template slot="operation" slot-scope="text, record">

    <a :href="'/TEData/Download?param1='+ record.param1+'&param2='+ record.param2">连接</a>                                                      
</template>

 </a-table>

2. 配置分页

在data中配置分页插件的一些属性值如：总共多少条数据、当前页、每页多少条数据、是否需要改变每页数据条数的组件、是否需要跳转页码的组件 onShowSizeChange是当页面数据条数发生改变的时候触发的事件、onChange()是页面跳转时触发的事件

pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize)
 },

3.配置表格加载： :loading="loading" loading 为true 显示加载状态，loading=false 停止加载