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

文档驱动 —— 查询组件：将查询功能做到极致！你说还有啥没包含进来？antdv + vue 3.0 全新体验 快捷查询个性化查询方案更换各种查询方式更多的查询条件meta 驱动封装基础

源码 https://github.com/naturefwvue/nf-vue3-ant 目的 简单方便，不用写代码就可以实现各种查询功能 把查询相关的功能都做全，不留遗憾 功能 快捷查询 个性化查询方案...如果有些控件比较长，比如时间的范围查询、多选组等，那么可以设置这些长控件多占用几个td，在调整一下先后顺序，整个页面就可以比较好看，不会出现挤的挤死饿的饿死的情况。..., 432: '在', 433: '在' } } }, methods: { myInput: function (e) {...其他的就不贴了，大同小异。 查询控件 暂时没有做成单独的控件，马上要改了，因为vue3.0的setup方式是在是要命，当然也可能是我能力有限，反正现在代码是看着都头大，必须重构。...改成组件的方式，就可以用data模式了，这样可看性会高不少。 感想 Ant Design Vue，研究了几天，感觉有个强大的UI库，太方便了。

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

​年终盘点: 复盘20+基于React的开源管理后台&插件

1.Fusion Design Fusion Design是Ant Design团队推出的一套设计规范，旨在提供一致的用户体验。...Ant Motion Ant Motion 是Ant Design 中提炼出来的动效语言。...它的核心是QueryClient,它是一个全局状态管理器,可以帮助我们从多个组件中访问和共享数据查询结果。 该项目是为网络开发人员提供的高质量开源软件。...为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。...基于 Ant Design 设计语言，提供了开箱即用的高质量 React 和 Angular 组件实现，用于开发和服务于企业级中后台产品。

49710

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

但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin...二个项目大同小异, 使用的技术栈react，ant-design，dva，Mock 基于 Antd UI 设计语言 虽然我对dva和ant-design 了解不深,但我还是准备挑战一下.不入虎穴焉得虎子...,先休息一下,别被这个问题让自己的眼光太局限,导致看不到问题的本质.在这个问题还没有解决的情况下,我又开始了另一个项目 ant-design-pro的尝试.因为我知道,那个页面没有显示数据的问题,我肯定会解决的...在数据不显示的问题上短暂停留下,我开始探索ant-design-pro 这里我来说一下，当一个菜鸟接手一个新项目时遇到的迷茫和问题。...说也说了够多的 下面我就用一个列表页来给你看一下 我是怎么了解一个前端项目和开发的 我以ant-design-pro的查询表格页面为例子 我们拿着/list/table-list这个路由去项目中搜索

1.8K20

Mock17-Antd高级模板组件ProComponents

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

22010

Mock16-项目前端框架Antd升级

antd pro升级 V4升V5 https://ant.design/docs/react/migration-v5-cn 通过参考上边的官方文档，也经过各类搜索引擎排查，经过两个晚上的尝试，由于涉及到太多依赖大跨度升级...https://pro.ant.design/zh-CN/docs/getting-started 进入到项目中按照上边的官方初始化文档，利用pro-cli创建脚手架 # 使用 npm npm i @ant-design...js文件，将service.js重命名为project.js 放在新的目录结构 src/services/ant-design-pro/project.js 下。..., searchProducts, removeProduct } from "@/services/ant-design-pro/project.js"; 最后还要根据升级后的语法调整文档对涉及到的变更处进行修改...，更新后必须显示的指定查询参数，否则会引起参数缺失错误 # prject.js <UpsertProject upsertName={name} upsertCurrent={current

12510

基于Ant Design Vue封装一个表单控件

开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的，但是博文写的似乎有点太长了，估计大家没时间往下看，于是就把有缺点写在前面了，不喜欢可以先跳过...那不那啥吗，基于ant design vue封装的，他们都那么强大了，还能有啥缺点？封装后除了失去灵活性还能差啥？）...为啥还要封装 ant design vue 都已经提供那么的组件了，还不够用吗？..., this.form); }, }, }; 在Form表单里面也是这样的设置方式，而表单里面有很多各种各样的控件，一个一个写起来实在是太累。...为啥不直接用antdv提供的 Form 表单？ 这个嘛，思路不太一样。好吧，其实是官网的代码，在本地还没有调试成功，等研究明白了还是会用的。

3.1K30

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

前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT 支持微服务。强大的代码生成器让前后端代码一键生成!...Vue3 UI升级升级ant-design-vue到3.2.12、升级vite等前端依赖升级antd3后，moment全部替换为dayjswebsocket功能优化表单支持右侧嵌入评论区、附件区代码格式化调整自动检查....ant-tabs-bar —> .ant-tabs-nav下拉类型的SelectTypes更名为SelectValue更多升级日志见 从 ant-design-vue 2.x 版本升级到 ant-design-vue...issues/I5ITL3vue3版本中，online报表 动态参数设置无效issues/I5HB7P主附表启用联合查询后导入有问题issues/111JVxeTable中的inputNumber不能输入小数...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发;开发效率很高,采用代码生成器

2.1K30

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

今天大师兄要分享的是一套开箱即用的前端解决方案：Ant Design Pro 简介 Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端/设计解决方案。...Ant Design Pro 力求提供开箱即用的开发体验，为此提供完整的脚手架，涉及国际化，权限，mock，数据流，网络请求等各个方面。它为中后台中常见的方案提供了最佳实践，从而减少学习和开发成本。...项目内容概览 统计仪表面板：分析页、监控和工作台 各种表单；包括基础表单、分步表单、高级表单； 各种列表：搜索列表、查询表格、卡片列表等 详情页布局和个人配置也是考虑很全面。...一些知识点也在我们前期的文章中介绍过，欢迎大家查阅。 也可以查阅文末的项目链接进一步了解 使用 提供了 pro-cli 来快速的初始化脚手架。...部署项目和普通的项目没有太大差别。使用 node scripts 中的构建命令即可完成构建。 体验和建议 Ant Design Pro 自带多场景的最佳实践方案，启动即完成了项目的整体架构。

89430

Element Plus 和 Ant Design Vue 对比测评，哪个更好？

Ant Design Vue 1.x 仅支持 Vue 2 ，2.x 是为了 Vue 3 开发的兼容版，并没有任何新特性，大多数的 API 也只是为了更好的兼容 Vue 3 ，3.x 版在易用性、功能、性能上都有了很大的提升...Ant Design table ，定义好 columns 有几列后，用 template 写法就无法用 v-if 去隐藏某一列 在 Ant Design Vue 里，Modal.confirm 某些...Ant Design Vue 2 & 3 是最早支持 Vue 3 的框架之一，新版本解决了很多 Vue 用户群在旧版本不喜欢的「单向数据流 value + change event」，实现了全 v-model...维护状态 Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无人维护，不更新了。...Ant Design Vue 虽然是以个人开发开始起步的，算是社区版，但它得到了蚂蚁官方认可，挂在蚂蚁金服底下的正式项目，保持了不错的更新和维护状态。

4.9K30

五年 Web 开发者 star 的 github 整理说明

mtjs/mt 手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架 scrat-team/scrat WEBAPP模块化开发框架（利用本地缓存） addyosmani...基于es6 generator的异步代码同步编写的工具库 Pana/koa-log4js koa日志组件 ant-design/ant-design 阿里的react组件库，很早、很好、很强大...操作localStorage、IndexedDB或 Excel中的数据 timtian/qo-sql 腾讯某前端高工写的babel 插件，用sql操作js对象，将sql编译成js代码 thejameskyle...h5开发框架 devbridge/jQuery-Autocomplete 输入框自动完成的库 dyve/jquery-autocomplete 输入框自动完成的库 xdan/autocomplete...日期控件 arshaw/xdate 日期控件 cubiq/iscroll 前端处理滑动的工具库（在ios上总能碰到奇葩问题） twbs/bootstrap 第一个h5 ui框架 jashkenas

8.8K50

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

://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...MongoDB 文档数据库 为了提高数据查询速度，我使用 Redis 这一高性能的内存数据库实现了缓存。同时利用 Redis 实现登录会话、限流、分布式锁等功能。...对象存储服务 为了性能和安全性，我在云托管的上层又套了 ECDN 全站加速网络 ，通过智能分配网络链路，动态的接口也能加速。

1.1K30

我用了多年的前端框架，强烈推荐！

地址：https://ant.design/ img 2）Ant Design ProComponents：在 Ant Design 的基础上进行封装和高度定制化的组件库，包含了像高级表格、表单等常用的业务组件...它提供了多种可视化图表和图形，用于帮助开发者在 Web 应用中创建交互式、吸引人的数据可视化图表。AntV 包括 G2、G6、F2 等多个子库，每个子库用于不同类型的数据可视化需求。...为什么用 Ant Design Pro？ 从定位上来说，Ant Design Pro 是一个开箱即用的中后台前端开发框架，能够帮助我们快速开发大多数网站（尤其是管理系统）。...如何学习 Ant Design Pro？ 由于该框架由大厂团队开发，经常发布更新版本和改动，所以请勿必 阅读官方文档 来学习，千万不要完全机械性地跟着教程去学习！...先去看最新官方文档上的命令和用法，或者切换文档版本为和视频一致。如果还有报错，那么就把错误信息贴到百度去查询。

47920

数据标记、分区、索引、标记在ClickHouse的MergeTree中的作用，在查询性能和数据更新方面的优势

图片数据标记在ClickHouse的MergeTree中的作用是什么？在ClickHouse的MergeTree引擎中，数据标记（标记列）主要用于跟踪数据的状态和版本。...查询数据时，ClickHouse会自动过滤标记为删除状态的数据，这样在查询过程中，不再需要额外的过滤或排除已删除的数据，从而提高了查询性能。它在数据更新方面的优势是什么？数据标记对于数据更新也有优势。...MergeTree引擎支持对标记列进行更新操作，例如将插入的数据列值进行更新。更新操作不会直接覆盖原始数据，而是插入一条新的数据，并标记原始数据为删除状态。这个更新操作的方式称为“更新插入”。...每个分区可以在独立的物理目录中存储，并且可以独立进行数据的插入、更新和删除操作。通过按照时间、日期、哈希或其他列进行分区，可以在查询时只处理特定的分区，从而提高查询的效率。...标记：在ClickHouse中，标记是一种用于标记分区中数据的机制。标记可以基于数据的特征进行更改，如修改或删除标记。

28441

一款中小企业的进销存管理系统,无需编写任何代码,支持高效开发复杂功能!

这是我目前见过最好的进销存管理系统项目。功能完整，代码结构清晰。值得推荐。...（查询逻辑无需编码，系统根据页面配置自动生成） │ ├─高级查询器（弹窗自动组合查询条件） │ ├─Excel导入导出工具集成（支持单表，一对多 导入导出） │ └─平台移动自适应支持 另外，搜索公众号...前端 Vue 2.6.10,Vuex,Vue Router Axios ant-design-vue webpack,yarn vue-cropper - 头像裁剪组件 @antv/g2 - Alipay...- Ant Design Of Vue 实现 vue-cropper - 头像裁剪组件 @antv/g2 - Alipay AntV 数据可视化图表 Viser-vue - antv/g2 封装实现...安装 node.js 切换到 ant-design-jeecg-vue 文件夹下 # 安装yarn npm install -g yarn # 下载依赖 yarn install # 启动 yarn

1.1K20

React函数式进阶

这是我在实际工作场景下使用Stateless Component最大的障碍。...Function as child Components 这也是React社区一种常见的组件构建方式。它也能解决HOC中丢失上下文、丢失ref的问题。...一般我们写一个autocomplete组件，是基于Popover -> Menu + InputTrigger -> AutoComplete这样逐步组合、增强基础组件的方式。...这么写会有几个问题：高级组件或者完全无法获取底层组件的引用，或者需要通过很奇怪的方式把引用回调一层层传下去；为了适配很多情况和需求，为了能控制各组合组件的行为，高级组件的参数会多的可怕：ant.design...Downshift只处理这一类组件的交互逻辑，维护组件状态，并暴露少数几个必须设置的子组件属性的接口。

81520

微前端x重构实践落地总结

因为原来的项目是 ant-design-vue + vue 全家桶，要切换成 ant-design + ant-design-pro + react 全家桶。...importnant 的优先级是最高的，如果微应用也用了这个 .ant-xxx 类，就很容易被主应用的样式影响了。所以在加载微应用时，还需要处理 ant-design 之间的样式冲突问题。...但是不知道为什么，在 less 文件中改了 ant-prefix 变量后，ant-design-pro 的样式还是老样子，有的组件样式改变了，有的没变化。...最后，我是通过 less-loader 的 modifyVars 在打包时来更新全局的 ant-prefix less 变量才搞定的： var webpackConfig = { test: /....事件 主应用跟子应用都改用 browser history 模式 加载状态 主应用在加载子应用时还是需要不少时间的，所以最好要展示一个加载中的状态，qiankun 正好提供了一个 loader 回调来让我们控制子应用的加载状态

98620

网友：装的还挺像的！罗永浩：Face ID不是好东西；Facebook开源oomd

2、Ant Design 3.7.1 发布，阿里开源的企业级 UI 设计语言‍ Ant Design 3.7.1 发布了，此次更新内容如下： ● 带页签的卡片页签支持 disabled 属性。...（详情：https://github.com/ant-design/ant-design/releases/tag/3.7.1） 3、谷歌/微软/推特/Facebook 宣布推出开源数据传输项目‍ ?...（详情：http://hbase.apache.org/downloads.html） 5、GitLab 11.1 发布，新增安全仪表板、增强代码搜索能力‍ GitLab 11.1 发布了，此次更新主要带来了如下更新...： ● 安全仪表板，在仪表板中，安全团队可以调整漏洞的关键性权重，创建问题以修复关键项目，同时取消其他项目，这样它们就不会反复显示在报告中。...● 增强代码搜索能力，过对高级搜索语法的增强，现在可以按文件名、路径和扩展名进行过滤，从而可以更快地找到正确的文件。

1.1K50

React函数式进阶

这是我在实际工作场景下使用Stateless Component最大的障碍。...Function as child Components 这也是React社区一种常见的组件构建方式。它也能解决HOC中丢失上下文、丢失ref的问题。...一般我们写一个autocomplete组件，是基于Popover -> Menu + InputTrigger -> AutoComplete这样逐步组合、增强基础组件的方式。...这么写会有几个问题：高级组件或者完全无法获取底层组件的引用，或者需要通过很奇怪的方式把引用回调一层层传下去；为了适配很多情况和需求，为了能控制各组合组件的行为，高级组件的参数会多的可怕：ant.design...Downshift只处理这一类组件的交互逻辑，维护组件状态，并暴露少数几个必须设置的子组件属性的接口。

1.1K60
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券