从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）

最新推荐文章于 2023-05-09 10:24:29 发布
最新推荐文章于 2023-05-09 10:24:29 发布
阅读量692 收藏 2
点赞数
分类专栏： 从0开始创建vue项目 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59816940/article/details/128615483
版权

往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）

引入elementui table

在这里插入图片描述

我们cv饿了么ui的table，就得到一个基础的表格

在这里插入图片描述

我们去请求学生列表的接口，得到真实的数据

api.js接口封装

接口文档

在这里插入图片描述
在这里插入图片描述

书写接口

在这里插入图片描述

使用

在这里插入图片描述
我们打印输出一下
在这里插入图片描述
发现接口调用成功

修改table

我们把我们的每一项和接口对应

在这里插入图片描述
在这里插入图片描述
数据对应
在这里插入图片描述
在这里插入图片描述
渲染成功

表格数据转换

我们的性别和状态显示是有问题的

在这里插入图片描述

我们需要转换一下

在这里插入图片描述
在这里插入图片描述
成功
在这里插入图片描述
状态同理
我们采用三元表达式会更优雅一些
在这里插入图片描述
在这里插入图片描述
完成

林多多@
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
浅谈vue获得后台数据无法显示到table上面的坑
12-28
因为刚学vue然后自己自习了一下axios，然后想写一个简单的查询后台数据 {{user.id}} {{user.name}} {{user.gender}} 然后先是写了这样一个代码 created: function () { axios.get(http://localhost:8080/student/findAll).then(function (response)
后台管理系统表单封装
DreamFJ的博客
04-21 777
背景：后台管理系统有很多布局类似的页面，查询展示的，表单提交的等。 系统基于Vue + ElementUI开发的单页应用。 每次写一个新增/编辑页面都会写一堆类似如下的表单代码： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <
从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）
随便写写
01-10 482
先用vue2+elementui从0搭建一个vue后台管理项目，完成后会迭代成vue3+TS+element-plus
vue列表简单封装
MuHao_Hearbeat的博客
04-08 1249
Vue封装table实现功能多表控制Vue封装table实现功能多表控制新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片列表封装生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Vue封装table实现功能多表控制 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如
Vue——根据tab值调取相应API，渲染列表数据
月来better
08-19 477
页面展示index.vue: <template> <div class="wrapper"> <TabList class="tablist" @tabEvent="tabEvent($event)" /> <div class="main-wrapper"> <button class="createbtn" color="primary" @click="toCreate"> 添加
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
vue2.0 从0到1搭建后台管理项目(一)
06-02
为store文件
基于python+vue3的一个纯净前后台管理系统框架源码+项目说明.zip
最新发布
08-26
基于python+vue3的一个纯净前后台管理系统框架源码+项目说明 后端 基于 python + fastApi + celery + sqlalchemy + redis 使用软件版本 python version 3.9.6 mysql version 8.0.23 redis version 6.0.9 node ...
Vue调用后台接口渲染列表
m0_48607837的博客
06-08 4528
下载Axios 在min.js中引入 拿到接口先封装一下api—>新建文件夹—>后缀名.js文件 暴露接口名称,在那个页面调用接口就在哪个页面引入 用element ui 里面的el-table和el-table-column这两个组件 在data中定义一个存放列表数据的空数组 在el-table中动态绑定一下 在methods中定义一个方法,调用接口,打印一下数据 listPage是封装好的接口暴露出来的名称 赋值完成以后,看一下需要展示那些数据,el-table-column中用p
利用vue3 调用api接口实现 数据的渲染 以及详情的实现
weixin_48864616的博客
02-24 1万+
首先新建一个项目 yarn create vite vue3-template --template vue 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> </script> <template> <router-view></router-view> </template> <style> </style> main.js
vue纯前端导入excel，获取excel的表格数据渲染el-table
weixin_48512601的博客
04-17 2231
最近有个需求，最开始列表数据是通过新增按钮一条条添加的，但是部分数据量可能上百条，客户自己手选会很慢，所以产品经理给了个需求要求可以通过上传excle文件进行导入。第一步：安装插件，我安的是0.16.0；原因是默认安装版本编译会有点问题，经过搜索后发现安装此版本后解决。上传的文件内容与拿到那数据内容如下：可以看到是正好是能对应上。经过网上查询及涉及自己项目，实现了此功能。页面中导入XLSX依赖。第四步：核心代码js。
VUE(三)：列表渲染、收集表单数据、过滤器、自定义命令
qq_45764317的博客
12-03 404
Vue检测数据的原理：1、vue会监视data中所有层次的数据2、如何监测对象中的数据?​ 通过setter实现监控，且要在new Vue时就传入要监测的数据​ （1）对象中后追加的属性，Vue默认不做响应式处理​ （2）如需给后添加的属性做响应式，请使用已下API​或3、如何监测数组中的数据?​ 通过包裹数组更新元素的方法实现，本质就是做了两件事：​ (1) 调用原生对应的方法对数组进行更新​ (2) 重新解析模板，进而更新页面。
vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染
defined_的博客
05-09 3049
在根据官方文档使用ant.design中的嵌套表格时，发现官方文档很多地方都不够详细。 在过程中踩了不少坑，例如：子表如何获取父表的数据？如何获取子表的行索引？如何让子表的数据源来自父表该行的数据？总之，最后还是磕磕绊绊做完了功能，于是第一时间把代码整理出来以作分享。
Vuetable-2使用全纪录
sinat_36065456的博客
06-27 1万+
vuetable-2 vuetable vuetablePagination vuetablePaginationMixin
vue.js axios 加载数据到table
gishys的专栏
05-16 1万+
1.后台数据加载到table1.代码直接上代码，分为引用，js和html部分。1.1添加引用&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt; &lt;script src="~/Scripts/vue.min.js"&gt;&lt;/script&gt; &lt;script src=&amp
Vue table 动态表格td可编辑 详解
qq_29091239的博客
03-23 2万+
项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化。 <el-table-column label="名称" width="140"> <template scope="scope"&gt...
vue组件之table表格
热门推荐
weixin_34289454的博客
05-15 5万+
table表格组件预览地址 （展示官网会略卡，一开始容易加载不出来） 基于vue写一个table组件 目前暂时打算完成的功能 固定表头 固定列 固定排序，接受排序函数，请求后端排序 请求时期的动画 多选框 展开行 结构和api借鉴AntDesign的， <x-table :columns="columns1" :data="data"> </x-table...
Vue table表格模板
Tom__cy的博客
06-11 3万+
el-标签总结：https://blog.csdn.net/Tom__cy/article/details/89680067 el-pagination 封装: https://blog.csdn.net/Tom__cy/article/details/89926274 axios 封装请求数据：https://blog.csdn.net/Tom__cy/article/details/89918...
vue后台管理系统项目从0到1
08-25
Vue后台管理系统项目从0到1，可以按照以下步骤进行： 1. 创建项目：首先，使用Vue CLI工具创建一个新的Vue项目。可以使用命令行或图形界面工具来完成这一步骤。 2. 设计界面：根据需求，设计后台管理系统的界面。可以使用UI组件库（如Element UI、Ant Design Vue等）来加快开发速度。 3. 路由配置：使用Vue Router来配置路由，定义页面之间的跳转关系。可以根据后台管理系统的功能模块进行划分，设计合理的路由结构。 4. 数据管理：使用Vuex来管理全局的状态和数据。可以定义各个模块的状态、获取数据的方法，并在组件中使用。 5. 接口调用：根据后台管理系统与后端API的交互需求，使用Axios或其他HTTP请求库来发送请求并处理响应数据。 6. 功能开发：根据需求逐步开发各个功能模块。可以按照模块划分，分别开发不同的页面和组件。 7. 数据展示：根据后台管理系统的需求，使用Vue组件来展示数据，例如表格、图表等。可以使用第三方库来提供更多扩展功能。 8. 权限控制：根据需求，实现后台管理系统的权限控制功能。可以使用路由守卫、角色权限配置等方式来限制用户的操作权限。 9. 测试和调试：完成功能开发后，进行测试和调试，确保后台管理系统的稳定性和可靠性。 10. 打包部署：最后，使用Vue CLI提供的打包命令，将项目打包为静态文件，并部署到服务器上。 通过以上步骤，你可以从零开始构建一个Vue后台管理系统项目。当然，在实际开发中还会遇到各种具体问题和挑战，需要根据具体情况进行解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林多多@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值