Ant-Design

环境：Vue2 + Antd 1.7.8版本:expandIconColumnIndex="3"设置后并未失效 解决办法： :expandIconAsCell="false":expandIconColumnIndex="1"expandIconAsCell属性在文档中并未找到，然而一起应用解决问题expandIconAsCell意思为：敞开开展按钮默认放在第一列

应用ant-design-vue打印弹出页<div id="printContent" class="info-detail"></div> <a-button v-print="'#printContent'" type="primary" style="text-align:right">打印</a-button> 把弹出页作为子组件即可

<a-table ref="table" size="middle" bordered rowKey="jobid" :columns="columns" :dataSource="jobList" :pagination="ipagination" :loading="loading" @change="handleTableChange"><span slot="departid" slot-scope="text"> {{ text | departFilter }} </span><span slot="action" slot-scope="text, row"> <a @click="handleEdit(row)">编辑</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.jobid)"> <a>删除</a> </a-popconfirm> </span> </a-table>rowkey,惟一,多选等下拉框时应用dataSource,对应的json数组columns对应json返回的列名通过过滤器,把id转化为name,在页面显示slot-scope="text, row" row传的是以后行的数据也能够像删除性能相似的传row.id<span slot="state" slot-scope="text, record"> <span v-for="(item,index) in customsCheckStatuses" :value="item.value" :key="index"> {{record.state==item.value? item.text:""}} </span> </span> <template slot="title" slot-scope="{title}"> <span v-if="title.indexOf(searchValue) > -1"> {{title.substr(0, title.indexOf(searchValue))}} <span style="color: #f50">{{searchValue}}</span> {{title.substr(title.indexOf(searchValue) + searchValue.length)}} </span> <span v-else>{{title}}</span> </template>这种形式和filter的输入形式相似,如果逻辑间接,这么解决更容易

<a-modal ref="modalForm" title="人员治理" :width="800" :visible="visible" @ok="handleOk" cancelText="敞开" @cancel="visible = false;" style="top:5%;height: 85%; overflow-y: hidden"> <a-form :form="bizForm"> </a-form></a-modal> 弹出页a-modal标签visible代表是否可见@ok="handleOk" 点击页面的确认按钮,触发的事件cancelText="敞开"勾销按钮显示文字是敞开@cancel="visible = false;"设置属性为不可见:form="bizForm" form里的input表单都绑定到bizForm变量里bizForm: this.$form.createForm(this), 初始化

a-select标签<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="部门"> <a-select placeholder="请抉择" v-decorator="['departid',{rules: [{ required: true, message: 'Please input your data!' }]}]" > <a-select-option v-for="d in departList" :key="d.departid" :value="d.departid">{{ d.departname }}</a-select-option> </a-select></a-form-item> 整体思路和v-for操作原生的select标签十分相似留神有key和value的值,两个都要有

-应用起来感觉没有elementUI不便 <a-form-item style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" label="id"><a-input placeholder="请输出名称" v-decorator="['personid', {}]" /></a-form-item><a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称"><a-input placeholder="请输出名称" v-decorator="['personname', { rules: [{ required: true, message: 'Please input your data!' }] }]" /></a-form-item>减少和批改在一个弹出页里,id须要暗藏a-form-item代表一行labelCol和wrapperCol是页面的布局v-decorator能够写验证信息

ant-design-vue中tree增删改1. 应用背景新我的项目中应用了ant-design-vue组件库.该组件库齐全根基数据双向绑定的模式实现.只有表单组件提供大量的办法.所以,在应用ant-design-vue时,肯定要从扭转数据的角度去切换UI显示成果.然而,在树形控件a-tree的应用上,单从数据驱动下来思考,感体验成果切实不好. 2. 以后痛点通过浏览官网帮忙文档,针对树形控件数据绑定.须要将数据结构成一个蕴含children,title,key属性的大对象.这样一个对象,要么通过后端结构好这样的json对象,要么就是后端给前端一个json数组,前端依据上下级关系构建这么一个树形对象.数据绑定好,就能够胜利的渲染成咱们想要的UI成果了.可痛点在哪里呢? 树形加载胜利后,我要向以后的树形增加一个同级以及上级节点该如何操作(增)树形加载胜利后,我要批改任意一个树形节点该如何操作(改)树形加载胜利后,我要删除一个树形节点该如何操作(删)以上操作,都要求不从新加载树形控件条件下实现.通过测试整顿出了三个可行计划 数据驱动作用域插槽节点事件 3. 数据驱动实现树形节点增删改咱们能够在帮忙文档中找到名为selectedKeys(.sync)属性,sync示意该属性反对双向操作.然而,这里仅仅获取的是一个key值,并不是须要的绑定对象.所以,须要通过这key值找到这个对象.须要找这个对象就相当恶心了 如果后端返回是构建好的数据,须要遍历这个树形数据中找到和这个key值对应的对象.我能想到的就是通过顶层节点递归查找.可是控件都渲染实现了,都晓得每个节点的数据.我为什要从新查找一遍呢???如果后端返回的仅仅是一个数组,这个方才有提到须要从新构建这部分数据为对象.这样查找这个对象又分两种状况 a. 如果列表数据和构建后树形对象采纳克隆的形式,也就是列表中对象的地址和树形中雷同key值对象的地址不同.须要通过办法1遍历从新结构后的树形数据 b. 如果列表数据中的对象和构建后对应的节点是雷同的对象地址.能够间接查找这个列表数据失去对应的对象.所以,恶心的中央就在于构建好一个树,我又得遍历这个树查找某个节点,或者采纳计划b这种空间换工夫的做法 这里咱们假如数据,曾经是构建成树形的数据格式.要实现数据驱动的首要任务须要实现两个外围办法 依据以后节点key值查找节点对象getTreeDataByKey依据以后节点key值查找父级节点children汇合getTreeParentChilds两个办法代码别离如下 // author:herbert date:20201024 qq:464884492// 依据key获取与之相等的数据对象getTreeDataByKey(childs = [], findKey) { let finditem = null; for (let i = 0, len = childs.length; i < len; i++) { let item = childs[i] if (item.key !== findKey && item.children && item.children.length > 0) { finditem = this.getTreeDataByKey(item.children, findKey) } if (item.key == findKey) { finditem = item } if (finditem != null) { break } } return finditem },// author:herbert date:20201024 qq:464884492// 依据key获取父级节点children数组getTreeParentChilds(childs = [], findKey) { let parentChilds = [] for (let i = 0, len = childs.length; i < len; i++) { let item = childs[i] if (item.key !== findKey && item.children && item.children.length > 0) { parentChilds = this.getTreeParentChilds(item.children, findKey) } if (item.key == findKey) { parentChilds = childs } if (parentChilds.length > 0) { break } } return parentChilds},3.1 增加同级节点增加同级节点,须要把新减少的数据,增加到以后选中节点的父级的children数组中.所以,增加节点的难点在如何找到以后选中节点的绑定对象的父级对象.页面代码如下 ...

项目介绍Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台！采用前后端分离架构：SpringBoot，Ant-Design-Vue，Mybatis，Shiro，JWT。强大的代码生成器让前端和后台代码一键生成，不需要写任何代码，保持jeecg一贯的强大，绝对是全栈开发福音！！ JeecgBoot在提高UI能力的同时，降低了前后分离的开发成本，JeecgBoot还独创在线开发模式（No代码概念），一系列在线智能开发：在线配置表单、在线配置报表等等。源码下载https://github.com/zhangdaisc...https://gitee.com/jeecg/jeecg...演示地址：http://boot.jeecg.org技术文档：http://jeecg-boot.mydoc.io快速入门：http://jeecg-boot.mydoc.io/?t...系统模块├─系统管理│ ├─用户管理│ ├─角色管理│ ├─菜单管理│ ├─权限设置（支持按钮权限、数据权限）│ ├─表单权限（控制字段禁用、隐藏）│ ├─部门管理│ └─字典管理├─智能化功能│ ├─代码生成器功能（一键生成前后端代码，生成后无需修改直接用，绝对是后端开发福音）│ ├─代码生成器模板（提供4套模板，分别支持单表和一对多模型，不同风格选择）│ ├─代码生成器模板（生成代码，自带excel导入导出）│ ├─查询过滤器（查询逻辑无需编码，系统根据页面配置自动生成）│ ├─高级查询器（弹窗自动组合查询条件）│ ├─Excel导入导出工具集成（支持单表，一对多 导入导出）│ ├─平台移动自适应支持├─系统监控│ ├─性能扫描监控│ │ ├─监控 Redis│ │ ├─Tomcat│ │ ├─jvm│ │ ├─服务器信息│ │ ├─请求追踪│ │ ├─磁盘监控│ ├─定时任务│ ├─系统日志│ ├─消息中心（支持短信、邮件、微信推送等等）│ ├─数据日志（记录数据快照，可对比快照，查看数据变更情况）│ ├─系统通知│ ├─SQL监控│ ├─swagger-ui(在线接口文档)│─报表示例│ ├─曲线图│ └─饼状图│ └─柱状图│ └─折线图│ └─面积图│ └─雷达图│ └─仪表图│ └─进度条│ └─排名列表│ └─等等│─常用示例│ ├─单表模型例子│ └─一对多模型例子│ └─打印例子│ └─一对多TAB例子│ └─内嵌table例子│ └─常用选择组件│ └─异步树table│ └─接口模拟测试│ └─一对多JEditable│ └─图片拖拽排序│ └─图片翻页│ └─图片预览│ └─PDF预览│ └─分屏功能│─封装通用组件 │ ├─行编辑表格JEditableTable│ └─省略显示组件│ └─时间控件│ └─高级查询│ └─通用选择用户组件│ └─通过组织机构选择用户组件│ └─报表组件封装│ └─字典组件│ └─下拉多选组件│ └─选人组件│ └─选部门组件│ └─通过部门选人组件│ └─封装曲线、柱状图、饼状图、折线图等等报表的组件（经过封装，使用简单）│ └─在线code编辑器│ └─上传文件组件│ └─等等│─更多页面模板│ ├─各种高级表单│ ├─各种列表效果│ └─结果页面│ └─异常页面│ └─个人页面├─Online在线开发(下个版本发布)│ ├─Online在线表单│ ├─Online在线图表│ ├─Online图表模板配置│ ├─Online在线报表│ ├─高级表单设计器└─其他模块 └─更多功能开发中。。系统特点采用最新主流前后分离框架（Springboot+Antd+Vue+Mybatis）强大的代码生成器，单表、一对多一键生成（包括前后端）简易Excel导入导出，支持单表导出和一对多表模式导出强大的权限机制，支持数据权限、表单按钮权限封装各种常用组件、报表组件，及其简单的生成图形报表支持菜单动态路由、支持多数据源查询过滤器：查询功能根据配置自动生成，不需要编码常用共通封装，各种工具类(定时任务,短信接口,邮件发送,Excel导入导出等）浏览器兼容性好，页面支持PC，Pad和移动端提供各种系统监控，实时跟踪系统运行情况（监控 Redis、Tomcat、jvm、服务器信息、请求追踪、SQL监控）提供简单易用的打印插件，支持谷歌、IE浏览器等各种浏览器示例代码丰富，提供很多案例学习升级日志修复功能我的部门录入用户bug处理 issues#202请求监控列表，ms单位问题修复 issues#132一对多示例功能，表单添加多张图片只显示一张问题处理 issues#103用户管理，改成逻辑删除首页统计报表优化菜单页面优化,菜单管理添加子菜单、顺序验证修复、菜单路由、前端组件为必选公告页面优化，postgres数据库兼容问题修正公告功能查询为空时，需要加判断，不然拼接sql会报错 issues#254系统管理-角色管理-添加/编辑加入校验，防止输入超过数据库限定字符长度信息，对用户友好提示部门管理、角色维护编辑时以及添加时问题修复部门管理，添加子部门按钮放出来，减少误解部门管理、角色维护编辑时以及添加时问题修复字典组件SQL注入风险处理启动项目，邮箱报错彻底解决 issues#225单表生成时,如果表字段过少,vue页面会出错处理 issues#234表格列表，字典字段排序问题处理 issues#244sys_log中request_param的字段过短问题 issues#214del_flag代码不规范问题 issues#169聚合路由问题修复，提供使用文档 issues#150登陆安全问题 issues#195解决继承实体无法翻译字典文本问题RedisConfig keyGenerator问题 issues#75权限类规范及ngalin菜单优化代码常量引用不规范的，重构统一常量文件引用导出功能excel导出未带登录人名字修复新功能前端项目升级依赖版本号：antv/data-set、ant-design-vue、vue、eslint、less、vue-template-compiler【新功能】用户注册功能实现【新功能】用户重置密码功能实现【新功能】用户手机号登录实现【权限升级】支持数据表格列权控制，及支持自定义列选择显示字典翻译注解@ Dict，支持多值翻译菜单升级，路由支持是否缓存配置提供国际化改造方案 issues#210动态数据源版本升级升级mybatis-plus版本3.1.2，支持逻辑删除注解@TableLogic增加工具 hutool代码生成器模板规范，进一步规范精简代码，导入支持批量插入数据库示例demo主键改成ID_WORKER_STR，后续系统ID规则全部切换为ID_WORKER_STR阿里规约检查扫描调整部分代码自定义组件新增corn表达式生成组件JMultiSelectTag组件升级，父组件动态改变dictOptions值时，子组件更新下拉列表的值JEditableTable功能增强，支持hidden类型、默认值显示错误字典组件支持表字典带条件新增JTreeSelect树形下拉框组件 (异步加载)新增JTreeDict 分类字典树形下拉组件新增异步加载树TABLE组件 JTreeTable新增表单禁用专用组件 JFormContainer新增图形验证码组件 JGraphicCode系统截图PC端 ...

距离 Pro 的上个版本发布已经过去了 8 个月，Pro 也进行了许多的迭代，但是大部分更新仍然以修复 bug 为主。在此期间我们遇到了许多使用 Pro 的痛点，也在思考如何能够解决这些问题。与此同时整个前端业界也在发生着变化，随着业务的复杂化，微前端已经呼之欲出。类似阿里云的控制台这样的上百页面，几百位开发者共同协同的项目也会越来越多。Serverless 方兴未艾，前端上云也仍在探索，每天都有新的挑战。 v4 就是我们应对挑战的最新尝试，我们带来了 TypeScript，Layout 组件，区块等新特性，并且逐渐抽离 Pro 的组件到 Ant Design 中。同时我们也带了新的项目创建方式，显著的减少了冗余的代码。 ???? 快速开始新建一个空的文件夹作为项目目录，并在目录下执行： yarn create umi // or npm create umi选择 ant-design-pro 就是 v4 的脚手架了。 Select the boilerplate type (Use arrow keys)❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.脚手架将会自动安装，然后运行即可跑起一个 Ant Design Pro V4 的项目！ ...

前言：这篇依旧长，请耐心看下去。 一、事件委托DOM有个事件流特性，所以触发DOM节点的时候，会经历3个阶段：（1）阶段一：Capturing 事件捕获（从祖到目标）在事件自上（document->html->body->xxx）而下到达目标节点的过程中，浏览器会检测 针对该事件的 监听器（用来捕获事件），并运行捕获事件的监听器。 （2）阶段二：Target 目标浏览器找到监听器后，就运行该监听器 （3）阶段三：Bubbling 冒泡（目标到祖）在事件自下而上（document->html->body->xxx）到达目标节点的过程中，浏览器会检测不是 针对该事件的 监听器（用来捕获事件），并运行非捕获事件的监听器。 二、$().click()作用：为目标元素绑定点击事件 源码： //这种写法还第一次见，将所有鼠标事件写成字符串再换成数组 //再一一绑定到DOM节点上去 //源码10969行 jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup contextmenu" ).split( " " ), function( i, name ) { //事件绑定 // Handle event binding jQuery.fn[ name ] = function( data, fn ) { return arguments.length > 0 ? //如果有参数的话，就用jQuery的on绑定 this.on( name, null, data, fn ) : //否则使用trigger this.trigger( name ); }; } );解析：可以看到，jQuery 将所有的鼠标事件都一一列举了出来，并通过jQuery.fn[ name ] = function( data, fn ) { xxx } ...

今天利用webpack-theme-color-replacer插件，为ant-design实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。有需要的同学可以参考下。 源码：https://github.com/hzsrc/ant-... 效果预览：https://deploy-preview-4289--...在右侧中央的配置按钮点开可以切换主题色。 实现方案：方案是统一的，见之前的文章：https://segmentfault.com/a/11... 基本步骤：基于 ant-design-pro 这个项目上进行修改： 1、webpack加入插件配置：查看修改：https://github.com/hzsrc/ant-... 2、运行时动态切换主题色，查看修改：https://github.com/hzsrc/ant-... （因笔者时间有限，color.less文件中的colorPalette变换函数所涉及的颜色值没有纳入） 实现效果：初始主题色： 切换后主题色：

今天利用webpack-theme-color-replacer插件，为ant-design-vue实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。有需要的同学可以参考下。 源码：https://github.com/hzsrc/ant-... 效果预览：http://test.hz300.com/ant-des...在右侧中央的配置按钮点开可以切换主题色。 实现方案：方案是统一的，见之前的文章：https://segmentfault.com/a/11... 基本步骤：基于 ant-design-pro-vue 这个项目上进行修改： 1、webpack加入插件配置：查看修改：https://github.com/hzsrc/ant-... 2、运行时动态切换主题色，查看修改：https://github.com/hzsrc/ant-...新增文件：https://github.com/hzsrc/ant-... 实现效果：初始主题色： 切换后主题色：

前言1. 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结在使用Select时几种常见的问题 遇到的问题在初始化Select值,如何根据value显示对应文本 实现代码如下 ...this.props.form.setFieldsValue({ latticeId, latticeNo, goodsId, remaining});...<FormItem {...formItemLayout} label="商品"> {getFieldDecorator('goodsId', { })( <Select style={{ width: '150px' }}> {this.state.goodsData.map((item,index) => <Option key={item.goodsId} >{item.goodsId +'-' + item.goodsName}</Option>)} </Select> )}</FormItem>此时，代码实现的效果并不如预期效果，显示出了商品的id 在尝试加上value属性的时候出现了一个问题 查阅相关文档是支持number的，百思不得其解。了解到项目使用版本是2.13.10版本的，怀疑是版本问题。查阅对应版本的文档，问题就出现在这里，在2.13.11版本中value是不支持number类型的，只支持string。在了解到问题的根源后，修改相应代码。 ... this.props.form.setFieldsValue({ goodsId: goodsId && goodsId.toString(), }); ... <FormItem {...formItemLayout} label="商品"> {getFieldDecorator('goodsId', { })( <Select style={{ width: '150px' }}> {this.state.goodsData.map((item,index) => <Option key={item.goodsId} value={item.goodsId.toString()}>{item.goodsId +'-' + item.goodsName}</Option>)} </Select> )} </FormItem>现在版本也是能支持 string | number ...

1、当给数组的index赋负数或小数时，数组的长度有无变化？ let arr=[] arr[10]=11 console.log(arr.length); //11 arr[-1]=-1 console.log(arr.length) //11 arr[3.14]=3.14 console.log(arr.length) //11 //=================================== let arr1=[] arr1[2.1]=2.1 console.log(arr1[2.1],'arr144') //2.1 console.log(arr1.length,'arr145') //0 arr1[1]=1 console.log(arr1.length,'arr147') //2 //======================== let arr2=[] arr2[-1]=-1 console.log(arr2.length,'arr253') //0 //======================== let arr3=[] arr3[5]=5 console.log(arr3.length,'arr258') //6由此可见，array的length属性只计算非负整数下标！不计算负数、小数 2、antd-pro 项目热更新慢并且是在95%（emitting）时卡住怎么办？ 本人实际上是less文件里多写了个逗号。。。。???? 3、less 子类名使用 active span { position: relative; .leftIcon{ border-radius: 17px; } &.active { background:rgba(94,112,231,1); .leftIcon{ background:rgba(255,255,255,1); } } }4、antd 的 Spin 组件不认识 undefined（Spin 组件的 spinning 属性只对 true/false 生效），如果是 undefined 状态会是一直读取的状态 ...

1、项目使用的是svg图片，一般这样调用： import CustomIcon from './aa.svg';render(){ return(<img src={CustomIcon}/>)}或者是这样：使用 js 文件来存储 svg，并能直接在<Icon>组件中使用： dd.js： import React from 'react';const cc = props => ( <svg width="1em" height="1em" viewBox="0 0 28 28" > <g stroke="xxx" strokeWidth={2} fill="none" fillRule="evenodd"> <path d="xxx" strokeLinecap="xxx" /> </g> </svg>);export default bb;使用： import bb from './dd'render(){ return(<Icon component={bb} />)}但是！不能直接将svg作为Icon的component：ee.svg： <?xml version="1.0" encoding="UTF-8"?><svg width="28px" height="28px" viewBox="0 0 28 28" xxx> <desc></desc> <g xxx></g></svg>ff.js: import Ee from './ee.svg'render(){ return(<Icon component={Ee} />)}这样程序报错 2、将自定义SVG直接作为Icon组件的注意点如下： 以上截图出自antd的Icon组件 3、但是我使用的antdPro框架，配置文件是config.js和 plugin.config.js，没有webpack.config.js文件，所以不知道怎么配置webpack，如何解决？ 解决方案：（1）在config.js中添加这行代码： urlLoaderExcludes: [/.svg$/], （2）在plugin.config.js中添加 ...

一、配置less在配置less之前，我使用create-react-app，得到React版本为^16.8.6。 安装依赖并解构目录：（可以在命令前加sudo确保不会出现权限问题）yarn add babel-plugin-import 或 npm install babel-plugin-importyarn less-loader 或 npm install less-loaderyarn eject 或 npm run eject解构后，我得到的webpack版本为4.28.3，config文件夹长这样： 于是，打开webpack.config.js修改配置：在第42行附近修改代码为： // style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/;const lessRegex = /\.less$/; //新增const lessModuleRegex = /\.module\.less$/; //新增在第327行附近修改代码为： oneOf: [ { ...//其他配置 }， ...//其他配置 //配置less-loader（新增） { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), }, //EndOf配置less-loader（新增） ...//其他配置]二、配置antd定制主题修改package.json： ...