文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Mock17-Antd高级模板组件ProComponents

升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...可以显著地提升制作 CRUD 页面的效率，更加专注于页面 拿项目解释下，我们之前在实现项目管理的时候，是一个个组件组装起来，并且需要对样式进行布局调整。而且大部分页面的无非就是表单，搜索和分页表。...对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询时和 params 参数发生修改时重新执行。...同时查询表单的值和 params 参数也会带入。...表头和列的配置和绑定核心全在columns配置，它是一个JSONArray类型，里边各项属性按需参考列说明，这里特别说明一个属是 HideInXX, 它可控制某列绑定在不需要的区域展示，比如对于说明，我们并不像它出现在搜索区域里

21610

JeecgBoot 3.4.2 版本发布，Vue3版本大升级

前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...既能快速提高效率，节省成本，同时又不失灵活性！...从 ant-design-vue 2.x 版本升级到 ant-design-vue 3.x 版本form表单label宽度设置问题修复，如表单宽度效果有问题，可以去掉宽度设置新功能升级新版系统通知风格...既能快速提高开发效率，节省成本，同时又不失灵活性。...，单表数据模型和一对多(父子表)、树列表等数据模型，增删改查功能自动生成，菜单配置直接使用（前端代码和后端代码都一键生成）；代码生成器提供强大模板机制，支持自定义模板风格。

2.1K30
您找到你想要的搜索结果了吗？
是的
没有找到

Ant Design 4.0 正式版来了！

Ant Design 4.0 正式版来了 引言 我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后，我们终于迎来了 4.0 的正式版！...中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。此外，我们对阴影进行了调整，使其更符合真实阴影，也同时将信息层级更好体现。 ?...兼容性调整 Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。然而根据业界统计，IE9/10 浏览器无论是在全球还是在国内份额都在随着 Windows 系统更新而在不断缩减。...更小的尺寸 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...[5] Living demo: https://ant.design/components/select-cn/#components-select-demo-big-data [6] 此处: https

3.2K30

年前，我公开了自己网站的【底裤】

://less.bootcss.com/ 通过引入现成的组件库 Ant Design、Ant Design Components ，可以大大节约工作量，并且保证网站风格的统一： Ant Design：...https://ant.design/index-cn Ant Design Components：https://procomponents.ant.design/ 现成的组件 为了提高项目代码的规范...使用 Ant Desgin Pro 提供的脚手架，开箱即用，一行命令生成初始项目代码，直接把上面的所有技术全都整合好了： Ant Design Pro：https://preview.pro.ant.design...同时利用 Redis 实现登录会话、限流、分布式锁等功能。...对象存储服务 为了性能和安全性，我在云托管的上层又套了 ECDN 全站加速网络 ，通过智能分配网络链路，动态的接口也能加速。

1.1K30

JeecgBoot 3.5.0 版本发布，开源的企业级低代码平台

前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue3，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...既能快速提高效率，节省成本，同时又不失灵活性！...控件，第一个begin获取不到值，第二个值end取了第一个值 #268 建议JUpload组件，disabled为true的时候上传button能够变灰或者其他样式图案，便于知晓无法再点击上传。...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发; 开发效率很高,采用代码生成器...，单表数据模型和一对多(父子表)、树列表等数据模型，增删改查功能自动生成，菜单配置直接使用（前端代码和后端代码都一键生成）； 代码生成器提供强大模板机制，支持自定义模板风格。

1.5K30

jeecg-boot

强大的代码生成器让前端和后台代码一键生成，不需要写任何代码，保持jeecg一贯的强大，绝对是全栈开发福音！！...JeecgBoot在提高UI能力的同时，降低了前后分离的开发成本，JeecgBoot还独创在线开发模式（No代码概念），一系列在线智能开发：在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。...前端开发环境和依赖 node yarn webpack eslint @vue/cli 3.2.1 ant-design-vue - Ant Design Of Vue 实现 vue-cropper ...其他说明 项目使用的 vue-cli3, 请更新您的 cli 关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码 修改 Ant Design 配色...，在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明   css: {     loaderOptions: {       less: {

7.6K10

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

ProLayout 高级布局是 Ant Design Pro 中的一个组件，可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout ： layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...所以需要用 IconMap 转一下，我封装成了一个工具，放在 @/utils 里了：这里的 key 值和 umirc.ts 中 route 的 icon 对应。

2.4K20

Uni&antd的ProLayout布局动态菜单实现及踩坑记录

ProLayout 高级布局是 Ant Design Pro 中的一个组件，可以提供一个标准又不失灵活的中后台标准布局，同时提供一键切换布局形态，自动生成菜单等功能。...使用 umirc.ts 直接配置路由和 layout ： layout: {   name: 'Ant Design',   locale: true,   layout: 'side', }, 这样是可以正常显示了.../pro-layout'; import ProLayout, { PageContainer, MenuDataItem } from '@ant-design/pro-layout'; import...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...所以需要用 IconMap 转一下，我封装成了一个工具，放在 @/utils 里了：这里的 key 值和 umirc.ts 中 route 的 icon 对应。

13.5K31

Ant Design 按钮和图标的使用

命令： npm install antd --save 或 yarn add antd 在package.json文件中可以找到对应的依赖，最新版本是4.16.10 2.引入按钮组件 首先需要引入...Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd..."; 我们点击 "antd"并且按住ctrl键，就能跳入antd的源码中 同样的方法继续点击 “button”，就能一层一层看到具体是怎么写的。...也可和其它的类型一起使用。 danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。...import { SearchOutlined } from '@ant-design/icons'; 可以为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置)

2.4K30

浅谈 Checkbox Group 的双向数据绑定

前言 Checkbox 作为表单中最常见的一类元素，使用方式分为单值和多值，其中单值的绑定很简单，就是 true 和 false，但是多值（Checkbox Group）的绑定就有一点复杂了。...在实际工作中发现很多组件库关于 checkbox-group 的双向绑定一直很别扭，或者说多多少少都有一些瑕疵。 开始本文之前，我们先假定有如下需求： ? 数据列表和输出值都是对象数组。...简单看一下 Ant Design 是如何设计这个组件的。...> Material Select 和 Ng-Select 在设计上稍微有一些差别。...相比之前借鉴 Ant Design 的方案来说，现在的方案更加灵活，有效减少了数据操作的代码，不过仍然有很大的优化和提升空间。 如果大家发现本文有不当之处，欢迎交流指正！

2K10

前端食堂技术周刊第 35 期：Vitest 、Jest 28、Ant Design v4.20.0、Lerna 官宣停止维护

Vitest 发布了 v0.10.0，主要更新如下： 声明测试的回调函数方式弃用，推荐使用 Promise 或者 async/await beforeAll/beforeEach 支持传入清理函数作为返回值...扩展上下文 context 并发快照 Jest 28[3] Jest 28 发布，主要更新如下： 安装尺寸较少了大约 1/3 测试运行分片，可以在不同机器上运行部分测试 全面支持 package.json...Design v4.20.0[4] Ant Design 发布了 v4.20.0，主要更新如下： 支持 React 18 以及严格模式 新增 Segmented 分段控制器组件 其他组件的一些 Bug...Core Web Vitals 指南[10] Web Vitals[11] 是 Google 于 2020 年引入的用来衡量用户体验的 Web 性能指标，并于 2021 年 5 月正式成为 Google 搜索算法中的排名因素...Design v4.20.0: https://github.com/ant-design/ant-design/releases/tag/4.20.0 [5] Lerna 官宣停止维护: https

1.6K20

『Ant Design』主题定制

这包括全局样式，比如主题颜色、圆角和边框样式，还有特定组件的外观定制。简而言之，你可以轻松地让 Ant Design 看起来符合你的品牌和业务的独特需求。...三. 4.x Ant Design 4.x 版本主题定制 方式一（修改样式变量，2B铅笔做法） 在 Ant Design 4.x 版本中，我们可以通过 less 和 CSS 变量来定制主题，什么意思呢？...这个文件在 node_modules 中，很明显这个文件是 Ant Design 的源码，过去我在其它的技术文章中说过，不推荐直接修改框架或者第三方库的文件，那么不推荐修改那怎么办呢？...，在 less-loader 中将下图中的配置添加进去： 在 modifyVars 属性中，我们可以通过修改 Ant Design 的样式变量来定制我们自己的主题。...我们在 craco.config.js 文件中更改的是不是 less 代码，但是我们的项目中引入的是不是 less 代码，我们的项目中引入的是不是 css 代码： 在之前的文章中，查看 Ant Design

35950

JeecgBoot 2.4.2 积木报表版本发布，基于 Spring Boot 的低代码平台

前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...积木报表: http://jimureport.com/plan 代码生成器升级 数据库兼容性深度测试、简化生成代码、丰富组件的支持 支持自定义树生成组件生成 支持高级查询的下拉多选、下拉搜索的生成 在...在功能测试中商品分类是树状下拉框，生成代码后变成input框了。 ...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发; 开发效率很高,采用代码生成器...，单表数据模型和一对多(父子表)、树列表等数据模型，增删改查功能自动生成，菜单配置直接使用（前端代码和后端代码都一键生成）； 代码生成器提供强大模板机制，支持自定义模板风格。

1.9K30

开箱即用的中台前端解决方案

今天大师兄要分享的是一套开箱即用的前端解决方案：Ant Design Pro 简介 Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端/设计解决方案。...Ant Design Pro 力求提供开箱即用的开发体验，为此提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。它为中后台中常见的方案提供了最佳实践，从而减少学习和开发成本。...项目内容概览 统计仪表面板：分析页、监控和工作台 各种表单；包括基础表单、分步表单、高级表单； 各种列表：搜索列表、查询表格、卡片列表等 详情页布局和个人配置也是考虑很全面。...部署项目和普通的项目没有太大差别。使用 node scripts 中的构建命令即可完成构建。 体验和建议 Ant Design Pro 自带多场景的最佳实践方案，启动即完成了项目的整体架构。...同时，它内置了模板组件，让开发更加高效。如果内置模板不能满足直接需求，该项目也做好了充分的兼容。它可以无缝对接 Ant Design, 让开发者有更多的组件可以选择或重组。

89230

React后台管理前端系统(基于开源框架开发)起步式

因为我想跳出舒适区.接受更大的挑战,目前和vue并驾齐驱的React项目也很流程,很多公司也在使用.于是乎,技术栈就是用React了。...但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin...二个项目大同小异, 使用的技术栈react，ant-design，dva，Mock 基于 Antd UI 设计语言 虽然我对dva和ant-design 了解不深,但我还是准备挑战一下.不入虎穴焉得虎子...在数据不显示的问题上短暂停留下,我开始探索ant-design-pro 这里我来说一下，当一个菜鸟接手一个新项目时遇到的迷茫和问题。...说也说了够多的 下面我就用一个列表页来给你看一下 我是怎么了解一个前端项目和开发的 我以ant-design-pro的查询表格页面为例子 我们拿着/list/table-list这个路由去项目中搜索

1.8K20

Ant Design Vue使用记录，持续记录

Ant Design Vue 1.x 1.Form组件（2.x之后用法不同） Form.create(options) | this.form.createForm(this, options) ，通过...Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。...3.select选择框 value传过去了但是显示的是value 而不是显示对应的选项，是因为传过去的值是number类型，而值是string类型，设置的value值跟选项的value值不相等，所以就找不到对应的选项值...3.datepicker汉化无效 Antd-design-vue 2.x  ，使用datepicker选择器在vite工具下，中文设置无效的解决办法（大概原因是中文语言包没有被正常引入，只能强行设置中文...单独使用message和Modal组件时，需要单独引入css import "ant-design-vue/es/message/style/css" import "ant-design-vue/es

5K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券