升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...ProComponents ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。...官网 https://procomponents.ant.design/ 模版组件 主要提供如下组件 ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能 ProTable 表格模板组件，...引入方法：import { ProTable } from '@ant-design/pro-components'; 区域布局参考如下图，其中所有部分都可以通过属性配置按需显隐 Img 重要API：...表头和列的配置和绑定核心全在columns配置，它是一个JSONArray类型，里边各项属性按需参考列说明，这里特别说明一个属是 HideInXX, 它可控制某列绑定在不需要的区域展示，比如对于说明，我们并不像它出现在搜索区域里
Oracle/SQLServer数据库 后端框架：spring boot + mybatis plus + redis + Druid + ActiveMQ/RocketMQ 后端框架：Vue3 + Ant...Design + Vben Admin(国内知名框架) 系统功能 作为OA的核心，工作流引擎功能强大，整体功能比Activiti更方便。...，省去大量的条件判断，极大降低流程复杂度2、跳签，没有用户的情况一可以跳过节点，支持复杂组织机构的利器3、选择策略，支持竞争、最闲者优先、角色中X人处理等策略4、超时策略，超时可等待、自动交办至下一节点或返回给发起人...，如：选择人员，自动拉取其借款记录3、自动冲抵，如：报销流程走完后，自动冲抵所拉取的借款记录，将来便不会再被拉取到4、显示规则，支持根据条件判断显示或隐藏区域5、验证规则，支持根据条件判断进行表单数据有效性校验...6、自带60多个宏控件，通过宏控件标准扩展接口可实现无限扩展 智能模块 支持零代码快速搭建模块，如：人事、CRM、车辆、项目、库存等模块，并可通过事件扩展1、支持拖拉方式设计模块的列宽、表头排序，定义工具条按钮等
Ant Design Vue 1.x 1.Form组件（2.x之后用法不同） Form.create(options) | this.form.createForm(this, options) ，通过...dataSource，用于指定表格的数据源。 loading，是否显示加载特效。 rowKey，用于指定每个表格列的key值，可指定一个字符串或者一个参数为每行的数据对象的函数。...scroll，用于固定表头，以及行数据滚动。 rowKey，每列的key值，作用同vue 的key。 @change，分页、排序、筛选变化时触发的事件。 size，表格的大小。...，同Array的排序。...单独使用message和Modal组件时，需要单独引入css import "ant-design-vue/es/message/style/css" import "ant-design-vue/es
组件和组件库 组件 单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。...我们来看下经过封装的表格组件，它具有表头的灰色样式、表头固定样式、行状态样式、间距样式等。同时它也具有表格行可伸缩、可排序、可拖拽、可内嵌展开等行为。...1)可以排序的表格 2）可以展开的表格 3）自带搜索的表格 注：现在市面上看到的UI,一般都是经过组合封装的，UI主题样式一般跟公司、项目有关。所以目前最多的叫法是“组件”。...现在市面上比较流行的组件库，有蚂蚁金服ant design，饿了么element ui、iView等。现在很多公司在做网站时，使用的是这几种组件库。当然也有部分公司使用自己研发的组件库。...使用不同的js框架，代码的写法几乎不一样，对应的组件库也不一样。 react->ant design vue->element 所以如果想把项目换一种框架来写，成本是相当高的。
你可以看到 ▫ 一个新的web UI轻量级框架 ▫ 同用IDE组件库和antd产生的冲突如何解决 ▫ 它们如何在Taier上完美配合 Keep It Simple, Stupid....，如： 配置完上述属性后，Ant Design 所有组件用到的主品牌色就被修改成了 #3f87ff 这个颜色。...除此之外，我们还修改了其他一些样式使 Ant Design 的整体风格更偏向 Molecule，如圆角属性，超链接属性等。 除了主题色的修改以外，还需要解决动态主题色的适配问题。...通过 Molecule 提供的监听主题色改变的事件，动态地加载不同主题风格的 Ant Design 样式文件。...如： 以上代码的大致意思是，当 Molecule 的主题发生改变的时候，如果改变后的主题是暗黑主题，那么我们就加载 Ant Design 的暗黑主题风格的样式文件，否则我们移除 Ant Design
2、ant design pro ant design pro 有提供三种布局。 （1）顶部菜单布局 即：顶部导航菜单 + 内容区域。...这种方式布局简单，但缺点很明显，菜单都挤在顶部导航区域，在菜单项越来越多时就放不下了，很难处理，可扩展性不强。 （2）侧边菜单布局 侧边菜单 + 顶部导航 + 内容区域。...} c-PageLayout-index 页面整体容器 appMainWrap 侧边栏右侧的（顶部导航区域 + 内容区域）容器 appMain 内容区域容器 （2）侧边菜单区域默认撑满高度，宽度可交给antd...路由配置数据： import PageLayout from '@/components/PageLayout' import { HomeOutlined } from '@ant-design...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
系列目录 【已更新最新开发文章，点击查看详细】 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI...共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。 与新式托管平台（如 Docker）集成。...1、Ant Design Blazor Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。 特性 提炼自企业级中后台产品的交互语言和视觉风格。...可与已有的 ASP.NET Core MVC、Razor Pages 项目无缝集成。 支持环境 .NET Core 3.1 / .NET 5。...开源地址：https://gitee.com/ant-design-blazor/ant-design-blazor 2、Bootstrap of Blazor ?
前言 先不说别的，上两个arco design table的bug。本来是写react table组件，然后看源码学习思路，结果看的我真的很想吐槽。...把多级表头的筛选 + 排序 + 固定逻辑好好梳理一下，目前的写法隐患太多了，我后面会写为什么目前的写法隐患很多，非常容易出bug！...currentSorter我们暂时不看，也是为排序的bug埋下隐患，我们这篇文章先不谈排序的bug。...把多级表头的筛选 + 排序 + 固定逻辑好好梳理一下，目前的写法隐患太多了，我后面会写为什么目前的写法隐患很多，非常容易出bug！...currentSorter我们暂时不看，也是为排序的bug埋下隐患，我们这篇文章先不谈排序的bug。
如：=COUNTIF(C2:C351,"男") ——求C2到C351区域（共350人）男性人数； 优秀率：=SUM(K57:K60)/55*100 及格率：=SUM(K57:K62)/55*100 标准差...第二部分：必备的Excel技巧 一、excel中当某一单元格符合特定条件，如何在另一单元格显示特定的颜色比如： A1〉1时，C1显示红色 0<A1<1时，C1显示绿色 A1<0时，C1显示黄色 方法如下...用格式刷将A2单元格的条件格式向下复制。 B列可参照此方法设置。...用格式刷将A2单元格的条件格式向下复制。 B列可参照此方法设置。 按以上方法设置后，AB列均有的数据不着色，A列有B列无或者B列有A列无的数据标记为红色字体。...如果要从小到大排序,公式改为:=SMALL($A1:$E1,COLUMN(A1)) 五、巧用函数组合进行多条件的计数统计 例：第一行为表头，A列是“姓名”，B列是“班级”，C列是“语文成绩”，D列是“录取结果
如：=COUNTIF(C2:C351,”男”) ——求C2到C351区域（共350人）男性人数； 9、优秀率： =SUM(K57:K60)/55*100 10、及格率： =SUM(K57:K62)/...用格式刷将A2单元格的条件格式向下复制。 B列可参照此方法设置。...用格式刷将A2单元格的条件格式向下复制。 B列可参照此方法设置。 按以上方法设置后，AB列均有的数据不着色，A列有B列无或者B列有A列无的数据标记为红色字体。...四、EXCEL中怎样批量地处理按行排序 假定有大量的数据(数值)，需要将每一行按从大到小排序，如何操作？ 由于按行排序与按列排序都是只能有一个主关键字,主关键字相同时才能按次关键字排序。...如果要从小到大排序,公式改为:=SMALL($A1:$E1,COLUMN(A1)) 五、巧用函数组合进行多条件的计数统计 例：第一行为表头，A列是“姓名”，B列是“班级”，C列是“语文成绩”，D列是
正式开始前，帮朋友做一个小测试，插播一个职场小调查，希望了解下大家在职场里的求职考量。点击下方小程序或底部阅读原文均可参与填写，多谢！...1.气泡确认Popconfirm 点击元素，弹出气泡式的确认框，一般可替代Modal对话框实现便捷的二次确认操作。.../vue/component/popconfirm#API 本篇主要用到一个ok按钮Events，即点击确认按钮时触发，对应还有个 cancel事件，默认是关闭确认对话框，如确认操作无特殊交互逻辑无需处理...2.1 组件构成 参考办公软件Excel在做数据表的时候（表头、行、列）格式，对应一个展示Table便有如下构成： 表头 ：说明这一列的信息类别，也可以在表头放置一些排序、筛选等操作按钮。...由表头和单元格组成，无其他拓展操作，对数据进行最基础展示； 固定表格 用于在固定表格重要行或列（一般为头和两边列）内容展示不全场景，出现滚动条可滑动预览； 选择表格 表格可以配置行的CheckBox，
为了能够基于 Kafka 构建一个可伸缩、可靠、高性能、易于使用的消息传递平台，我们克服了许多挑战。...应用程序可以将状态存储在基础设施层中，从而变成无状态的，将状态管理的复杂性 (如跨区域的同步和复制) 留给基础设施服务。...图 6：主备消费者从一个区域失效转移到另一个区域 阿里开源台柱 Ant Design 源码仓库被删了......但是，我们还有更具挑战性的工作要做，目前要解决如何在不进行区域故障转移的情况下容忍单个集群故障的细粒度恢复策略。...阿里开源台柱 Ant Design 源码仓库被删了...
Ant Design 的样式 import "antd/dist/antd.css"; 接下来我们需要引入我们想用到的按钮组件（这是一种解构的写法） import { Button } from "antd..."; 我们点击 "antd"并且按住ctrl键，就能跳入antd的源码中 同样的方法继续点击 “button”，就能一层一层看到具体是怎么写的。...需要讲ghost写出属性,幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。也可和其它的类型一起使用。...danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。...import { SearchOutlined } from '@ant-design/icons'; 可以为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置)
自动渲染 HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分 转换静态表格 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 注：和官方一样...layui 2.4.0 新增 “合计：” sort Boolean 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。...这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 详见自定义模板 toolbar String 绑定工具条模板。...layui 2.4.0 新增 “合计：” sort Boolean 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。...这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 详见自定义模板 toolbar String 绑定工具条模板。
: 头部区域header 、主体区域main、底部区域footer。...列标题：表头列标题最多输入 8 个字符。 滚动条：表格内容超过一屏需要显示竖向滚动条时，需要固定表头。只需滚动表格内容就好。如下图所示。...表头的文案，可遵循信息降噪的原则思考，如下图所示。 进度条的设计思考，如下图所示。 - 加载中进度条，存在加载中、成功、失败三种状态，进度条长度支持自定义。如下图所示。 弹框，如下图所示。...关于通用的栅格布局的思考如下： 三.关于数据可视化的设计展示思路如下： 数据可视化的四条核心原则：准确、清晰、有效、美观，这四条原则按重要等级先后排序，相辅相成且呈递进关系。...参考文献如下： 1、ZAN-DESIGN 的有赞网站 2 《CCtalk B端产品设计课》by 美芳老师 3、ANT-DESIGN 蚂蚁金服等网站 4、阿里系的数据可视化的设计网站 最后分享一个小故事，
前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT 支持微服务。...issues/I1N3H1 2.2.1版本bug，默认主题父子表生成的代码，如果先点击编辑，后点击新增，新增页面明细上会有之前编辑页面上的数据issues/1454 JS增强获取表单字段为undefinedissues...多表头导出，会多出一列空白列issues/1513 tinymce第一次打开正常,页面切换后再切换回来内容空白且无法编辑issues/1507 抽屉式界面下方有一点奇怪的显示issues/1532 头部菜单样式...采用最新主流前后分离框架（SpringBoot+Mybatis-plus+Ant-Design+Vue），容易上手; 代码生成器依赖性低,灵活的扩展能力，可灵活实现二次开发; 开发效率很高,采用代码生成器...导入导出等),基本满足80%项目需求 简易Excel导入导出，支持单表导出和一对多表模式导出，生成的代码自带导入导出功能 集成简易报表工具，图像报表和数据导出非常方便，可极其方便的生成图形报表、pdf、
功能需求背景 ---- 需求看起来比较简单，就是基于ant design的树形控件（https://ant.design/components/tree-cn/），开发一个功能，类似于将树形控件的一级子树由原来的竖向排序...： 改为横向排序： 不过实际实现的时候，其实横向放了N个树形控件（N的数值是由外部事件触发控制的，不是一个固定值），并不是一个单一的树形控件。...Design的树形控件（定义为：TreeSingle）。...从外层组件来看： 操作有两个，一个是增加，一个是删除，这两个操作都会重新渲染该组件所在的局部区域。除了这两个操作，在外部还需要获取所有树形控件中被选中的值。...在我们的场景中，貌似是没什么问题的，不过不建议这样做，因为React中很多操作（如渲染）是异步进行的，最好基于组件的生命周期去开发。 3.
我们每天有可能都在与数据列表打交道，比如列表的分页、查找列表（搜索查询）、按照指定的列升序降序排列这些需求，你可能再尝试使用 react-table or Ant Design table 这样的组件完成这些需求...同时表头旁边有上下箭头操作可以按照具体的某列进行升序和降序排列，最后列表的最下方有个分页组件，我们可以进行分页的操作。...就我个人而言，我更喜欢 “第一页 ️️️⏮️”，“上一页⬅️”，“下一页 ➡️” 以及“最后一页⏭️”的分页操作，如果当前页没有上一页或下一页的操作时，我们应该隐藏或者禁止相关按钮的点击。...return bLocale.localeCompare(aLocale, 'en', { numeric: isNumber(a[orderBy]) }) } }) } 点击表头的排序按钮...'desc' : 'asc', orderBy: accessor, })) } 我们继续处理表头的排序按钮展示，用来触发排序事件，同时用来显示当前的排序是按照具体的哪一数据项排序的，完善后的
image.png 安装组件 npm i ant-design-vue@next --save 引入组件 在main.js中全局引入组件。...import { createApp } from 'vue' import Antd from 'ant-design-vue' import App from '....// 按需引入ant-design-vue组件库 import { Button, message, Tabs, Checkbox, Image, Upload } from 'ant-design-vue...n.sohucs.gif electron自定义无边框导航菜单 为了让项目UI更加美观，大家可以选择在创建窗口的时候去掉系统边框，自定义拖拽区域。...360截图20210227164246855.png 通过css3来控制可拖拽区域-webkit-app-region: drag 不过会随之而来出现一个问题，就是鼠标右键会弹出一个系统菜单，那有木有什么方法可以屏蔽掉呢
领取专属 10元无门槛券
手把手带您无忧上云
