您的当前位置:首页>全部文章>文章详情

【Vue】Antd Pro Vue的使用(三)—— table列表的使用

CrazyPanda发表于:2024-04-26 21:40:33浏览:387次TAG:

用了几天ant design pro vue,发现vue2真的不是很好用,各种写法好麻烦。

还有研究组件时,一定要看低版本的组件,高版本都是vue3的,并不适用。

vue2版本组件位置:https://1x.antdv.com/components/alert-cn/

作为后台管理端,用到最多的就是table列表,官网给的有预览

image.png但是自己上手的时候有事另外一回事了,首先就是接口请求的数据结果,官网并没有介绍接口应该返回什么样的数据结构,导致接口成功请求到数据,但table就是无法正常显示,最终参考demo的mock数据,挖掘出了table需要的数据结构,如下图

无标题.png

可以看到,返回数据的result里面,包含

data:列表数据

pageNo:当前页

pageSize:每页数据条数

totalCount:数据总条数

totalPage:数据总页数

接口数据保持这样的结构就可以了。


猜你喜欢

【Vue】vue3+node+Element-Ui+spark-md5实现大文件上传、断点续传、秒传、多大文件上传
文章目录目录文章目录前言整体架构流程技术名词解释前端大文件上传断点续传后端大文件上传代码部分js部分的逻辑,按照我们的上面的分析,我们可以写出如下的结构将文件变成二进制,方便后续分片将大文件进行分片创建切片请求将每一个切片 并行/串行 的方式发出后端接口逻辑小结前言在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求。然而,由于文件大小较大,上传速度很慢,传输中断等问题也难以避免。因此,为了提高上传效率和成功率,我们需要使用切片上传的方式,实现文件秒传、断点续传、错误重试、
发表于:2023-12-05 浏览:325 TAG:
【Vue】Antd Pro Vue的使用(一)—— 安装及运行
前言Ant Design Pro 是一个企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。AntDesignVue与react版本有几乎相同的布局AntDesignPro React版本:开箱即用的中台前端/设计解决方案 - Ant Design ProAntDesign组件:Ant Design - 一套企业级 UI 设计语言和 React 组件库Ant
发表于:2024-04-20 浏览:308 TAG:
【Vue】vue3比vue2好在哪里
vue 3 优于 vue 2 的关键优势包括:性能提升:响应式系统重写,优化更新速度虚拟 dom 优化,提高渲染效率代码组织和可维护性:组合式 api,提升可维护性teleport 和 suspense,提高代码灵活性和可读性开发者体验:更好的调试工具,简化调试过程typescript 2.7 支持,增强代码提示和类型检查Vue 3 与 Vue 2 的优势对比核心性能提升响应式系统重写:Vue 3 引入 Reactivity API,优化了响应式系统的性能,提升了更新速度。虚拟 DOM 优化:采
发表于:2024-04-28 浏览:321 TAG:
【Vue】Antd Pro Vue的使用(十二) —— 菜单选中高亮显示问题
Antd Pro Vue2这套框架的路由菜单有两个问题,1、页面迁移子页面,父页面对应的菜单未能选中高亮显示2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示网上查到的一些菜单配置都是新版本的,老版本并不支持这些方法,这里总结一下我的解决方法,如果大家有更好的解决方案,欢迎交流。一、解决第一个问题以我的菜单为例商品列表是菜单页面,添加编辑商品是隐藏菜单,我把他们做成了兄弟菜单,而不是子菜单/src/config/router.config.js配置如下然后再/src/layouts/Bas
发表于:2024-05-14 浏览:275 TAG:
【VUE】如何查看前端的vue项目是vue2还是vue3项目
1. 检查package.json文件在项目的根目录下,打开package.json文件,查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如:Vue 2.x: "vue": "^2.x.x"Vue 3.x: "vue": "^3.x.x"2. 使用Vue Devtools如果项目正在运行,并且你已经安装了Vue Devtools(Vue开发者
发表于:2024-03-11 浏览:422 TAG:
【Vue】Vue中对axios进行封装的最佳实践
vue是当前前端开发中最常用的框架之一,而ajax请求又是前端开发中非常关键的一环。为了方便开发者使用,vue社区中出现了许多对ajax请求库axios进行封装的实践。本文将介绍vue中对axios进行封装的最佳实践,帮助您更好地理解如何在vue项目中使用axios。封装axios在Vue项目中,我们需要把axios进行封装以方便使用。这里介绍一个标准的axios封装:import axios from 'axios' import sto
发表于:2024-04-29 浏览:318 TAG:
【Vue】uniapp(vue3)+node.js+websocket(实现实时通信效果)
文章目录概要整体架构流程技术名词解释技术细节小结概要uniapp基于vue3,小程序的聊天功能项目是基于node.js服务器搭建的简易双向通信网页,实现了实时更新在线人数以及用户间即时通讯的功能。整体架构流程后台接口代码1、首先我们可以通过Express 应用程序生成器快速搭建一个后台框架。(这快可以参考官网)2、服务端/**  * WebSocket模块  */   const { WebSocketServer }&nbs
发表于:2023-12-05 浏览:304 TAG:
【Vue】Vue中使用vue-router的妙用详解
vue是当前最热门的前端框架之一,它不仅简洁易用,而且具有强大的扩展性,其中一个值得关注的插件就是vue-router。vue-router是vue官方路由插件,它可以更好地控制vue应用中的路由导航,使路由与组件之间的关系更加清晰,提升了用户的交互体验。本文将详细解读vue-router的使用方法及妙用。一、安装和使用在使用vue-router之前,需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下:npm install vue-router
发表于:2024-04-29 浏览:299 TAG:
【Vue】Vue定义全局变量的方法
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。定义全局变量的方法1. 使用Vue.prototype定义全局变量通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。在main.js定义全局变量// main.jsVue.prototype.baseUrl = "https://www.example.com/api
发表于:2024-04-22 浏览:362 TAG:
【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
1. 默认语言设置 Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效修改后修改后的页面2. 请求服务端接口Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉
发表于:2024-04-25 浏览:472 TAG: