vue3 antd项目实战——table表格(一文带你快速实现后台管理系统最常用的table表格)

零基础filter实现最简单的table表格

  • 知识调用
  • 核心干货
  • 下期预告
    • 关键字模糊查找(纯前端)
    • 关键字模糊查找(前后交互)

知识调用

功能实现可能要用到的知识:
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3项目实战中的接口调用方法(一)async/await用法
vue3项目实战中的接口调用(获取表格数据时可能用到)

核心干货

文章中功能的实现还是沿用 ant design vue 组件库

在这里插入图片描述

首先打开antd官网,找到table表格一栏。👏👏👏
里面会有详细的介绍,教你如何使用table组件。👏👏👏

何时使用

  • 当有大量结构化的数据需要展现时。
  • 当需要对数据进行排序、搜搜、分页、自定义才做等复杂行为时。

如何引用
指定表格的数据源(实质为一个数组)dataSource

代码示例:(根据需求修改即可)
template部分:

<template><a-table :dataSource="dataSource" :columns="columns" />
</template>

script部分:

<script setup lang="ts">// 存储数据的数组const dataSource = [{key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号',},{key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号',},],// 行目录const columns = [{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '住址',dataIndex: 'address',key: 'address',},]
</script>

实现效果: 👇👇👇

姓名年龄住址
胡彦斌32西湖区湖底公园1号
胡彦祖42西湖区湖底公园1号

但更多时候,数据的来源不是由后台来创建的,数据是灵活的,来源于后端的数据库,所以表格内的数据一般采用请求后端接口的方法,获取数据存放到表格中。
下面将给出一些参考示例。👇👇👇
template部分代码:

<a-table :data-source="data.list" :columns="columns" style="width:100%"></a-table>

请求接口request部分:

接口: https://www.fastmock.site//mock/323354e56ef21147c3f550e18435baa1/api/getList

代码图片:(含注释)
在这里插入图片描述
源码:(含注释,根据需求修改)

import request from "../utils/request";// 定义并导出请求接口函数
export const getList = (data:any) => {return request({ // 返回request请求url: '/mock/323354e56ef21147c3f550e18435baa1/api/getList ', // 请求接口的地址data:data,})
}

请求接口部分:
代码截图:(含注释)
在这里插入图片描述
源码:

const initGetList  = async () => { const {data:res} = await getList(data) // console.log(res) data.list = res.data 
}
initGetList()

表格横向栏内容部分:(根据需求适当修改)

代码截图:
在这里插入图片描述
源码:

import { reactive } from "vue";export let columns = reactive([{title:'用户ID',dataIndex:'userId',key:'userId',width:75,},{title:'ID',dataIndex:'id',key:'id'},{title:'标题',dataIndex:'title',key:'title'},{title:'详情',dataIndex:'body',key:'body'},
])

实现效果截图:
在这里插入图片描述

补充说明:

  • 接口改变时,根据请求的要求做出适当更改
  • 数据表格目录增多时,做出添加即可
  • 以上便是关于vue3使用 ant design vue 组件库 实现的最基础的table表格
  • 当然table的水还是很深的,涉及到很多自定义功能.
  • 最常见的当然是插槽,后续文章会对插槽展开深入研究。

下期预告

关键字模糊查找(纯前端)

关键字模糊查找(前后交互)

今天的故事到这就结束了,觉得这篇文章有用的小伙伴们,可以点赞➕关注哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/59649.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tf.placeholder代码详解

tf.placeholder(dtype, shape, name) 作用&#xff1a;创建一个类型为dtype&#xff0c;形状为shape&#xff0c;名字为name的一个Tensor类型 返回值&#xff1a;一个tensor类型 注意&#xff1a;tf.placeholder生成的tensor并不能直接print&#xff0c;需要通过sess.run才…

人工智能之线性代数应用

线性代数 1. 从初等函数到高等数学 一元线性函数 在中学的初等数学里,把函数 f ( x ) = k x + b f(x)=kx+b f(x)=kx+b ( k , b k,b k,b是不变量),称为一元线性函数,因为在平面直角坐标系中这个函数的图形就是一条线,就是变量(包括自变量和因变量)之间的映射关系描述为…

《乐队的夏天》刺猬乐队下半年音乐节巡演时间表

《乐队的夏天》总决赛&#xff0c;HOT5乐队诞生&#xff01; 新裤子乐队夺冠&#xff0c;痛仰乐队和刺猬乐队分列第二名和第三名&#xff0c;Click#15和盘尼西林乐队获得第四名和第五名。 在hot5乐队中有这么一支乐队&#xff0c;深得Guitar Pro的喜爱 高晓松评说&#xff1a…

什么是刺猬理念

一、什么是刺猬理念 刺猬理念是指把复杂的世界简化成单个有组织性的观点&#xff0c;一条基本原则或一个基本理念&#xff0c;发挥统帅和指导作用。核心是把事情简单化&#xff0c;把所有的挑战和进退维谷的局面压缩为简单的。 二、刺猬理念的寓言故事 狐狸是一种狡猾的动物&am…

刺猬乐队在唯品会工作过_Microsoft乐队是您从未听说过的出色智能手表和健身追踪器...

刺猬乐队在唯品会工作过 In late 2014 Microsoft released the Band. It came out of left field. Rumors had been rolling around about Microsoft possibly doing a wearable, but details were non-existent. When it came out people were… well, confused. And rightly …

多目标优化算法:多目标天鹰优化算法MOAO(提供Matlab代码)

一、算法简介 天鹰优化算法&#xff08;Aquila Optimizer&#xff0c;AO&#xff09;由Laith Abualigah等人于2021年提出&#xff0c;该算法的灵感来自天鹰在自然界中捕捉猎物的行为。 天鹰是深棕色的&#xff0c;脖子后面有浅金棕色的羽毛。幼天鹰主要在尾巴上有白色&#xf…

神奇的人工智能之神笔马良|Stable Diffusion使用

1,月球上骑马的宇航员。 image generate by stable-diffusion model 2,下棋的狗 image generate by stable-diffusion model 3,沉迷学习的史努比 image generate by stable-diffusion model 4,鲤鱼跃出海面

音速索尼克 怪人_最奇妙的刺猬索尼克粉丝游戏

音速索尼克 怪人 Sonic is hilarious. Maybe it’s the decades of bad games. Maybe it’s the Extreme Attitude™, a 90s marketing gimmick that feels dated now. Or maybe it’s just that he’s a weird looking dude. 索尼克很搞笑。 也许这是数十年来糟糕的比赛。 也许…

VTK:刺猬用法实战

VTK:刺猬用法实战 程序输出程序完整源代码程序输出 程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h> #

python应用在人工智能_python应用篇-大数据和人工智能时代下,python牛在哪?

一、人工智能领域&#xff0c;python必用&#xff1f; 人工智能有多么火热呢&#xff1f;现在每12家拿到投资的创业公司&#xff0c;其中就有1家&#xff0c;是跟人工智能领域相关的。而在几年前&#xff0c;这个数字是48。 不管大家对这个行业的了解有多少&#xff0c;但你们…

『开源项目』基于STM32的智能垃圾桶之综合代码(HAL库)

大家好,我是『芯知识学堂』的SingleYork,前面给大家简单介绍了<基于STM32的智能垃圾桶之成员简介>、<基于STM32的智能垃圾桶之语音识别>、<基于STM32的智能垃圾桶之语音播报>和<基于STM32的智能垃圾桶之舵机控制(HAL库)>,今天笔者将要给大家介绍我…

刺猬猫服务器维护2020,刺猬猫杂谈:我认真起来连老板的号都敢封!

原标题&#xff1a;刺猬猫杂谈&#xff1a;我认真起来连老板的号都敢封&#xff01; 铁面无私 首先第一个重要通知 请各位不要在违纪的边缘来回试探 刺猬猫可是铁面无私的 就算是老板违规了也是要按规矩办事 讨论区公告也有通知 请大家引以为戒 自觉维护刺猬猫的和平 female 有…

目标检测算法实现(三)—— yolov5 代码调试

在高xq大佬的指导下完成了代码的调试和第一次训练&#xff0c;纯手工复盘记录&#xff0c;再度理解学习~&#xff01;&#xff01;&#xff01; 记录的逻辑不是很清晰&#xff0c;因为知识盲区太多&#xff0c;待理解的后续继续补充&#xff0c;未实现的后续继续实现并补充记录…

深度学习基础2-----如何使用下载的代码

目录 一、环境配置 1、requirements.txt 二、训练 1.训练公开数据集 2、训练自己的数据集 三、模型预测 下载代码后我们来瞧瞧如何使用&#xff01;&#xff01;&#xff01;&#xff01; 大类中主要包含三部分&#xff1a;环境配置&#xff1b;训练数据&#xff1b;模型…

深度学习基础3------看代码步骤

目录 一、代码的重要部分 二、模型本身 三、训练参数 四、数据加载 1.训练的数据价值 2.预测的数据加载 五、损失函数 六、预测后结果 一、代码的重要部分 包括两个部分&#xff1a;训练模型&#xff0c;模型预测。 训练模型--------需要考虑模型本身&#xff0c;训练…

ppt讲解html,HTML简介讲解.ppt

作业 1.制作一个图文并貌的网页至少3张图片、一个视频文件 文字不少于三段&#xff0c;字数不少于100字 至少用到 等标记符及align属性 图片应分别满足以下排版要求&#xff1a; 实现文本与图像的环绕 文本居于图片左侧 文字与图片在垂直方向上居中对齐 2.制作一个具有锚点链接…

人工智能 60 年技术简史

https://www.toutiao.com/a6711206007982277124/ 作者 | 李理&#xff0c;环信人工智能研发中心 VP 封图 | CSDN 付费下载自视觉中国 出品 | CSDN AI 科技大本营&#xff08;ID:rgznai100&#xff09; 人类的进化发展史就是一部人类制造和使用工具的历史&#xff0c;不同的工…

EndNote X9 参考文献附录列表 格式调整

文章目录 1 参考文献附录列表 格式调整2 EndNote X9 插入参考文献常见问题总结3 EndNote X9 快速上手教程&#xff08;毕业论文参考文献管理器&#xff09; 1 参考文献附录列表 格式调整 注意&#xff1a;这里讲的是对齐格式&#xff0c; 文献规范格式参考EndNote X9 快速上手…

如何将统一参考文献的格式?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 背景一、使用PubMed二、使用谷粉学术总结 背景 在写中文的文章、开题报告、学位论文、申报书的时候&#xff0c;我们都不免会遇到需要将参考文献引用为统一的格式。…

将 EndNote 文献信息导出成 BibTeX 格式(可根据label排序)以及出现三个问号

文章&#xff1a;将 EndNote 文献信息导出成 BibTeX 格式 - 知乎 介绍的很详细 BibTeX Export using EN Label Field下载地址&#xff1a; https://endnote.com/wp-content/uploads/plugins/styles/BibTeX%20Export%20using%20EN%20Label%20Field.ens 其中有一个问题就是&…