import { Row, Col } from 'antd'; <Row type="flex" //内容布局(左靠齐,右靠齐,居中) justify="start" //左靠齐 (start,center,end,space-between,space-around) align = "top" //flex布局下垂直对齐方式:top(默认),moddle,bottom gutter = number/object //栅格间隔,可以写

 UIStore.ts (使用mobx) 1 import { observable, action, computed } from 'mobx' export class UIStore { @observable public selectedRowKeys: string[] = [] // 单选 选中的key @action public onSelectedRowKeysChange = (selectedRowKeys: string[]) => { this.selectedRo

antd 的 Tree 控件没有提供点击展开的功能,只能通过左边的三角形实现展开和收起,没办法只好自己实现这个功能. 先看效果 如图实现的是类似 Mac 文件目录形式的结构,有箭头代表是个文件夹,点击展开文件夹,点击外层文件夹可以收起整个文件夹. 首先根据服务器返回的 Json 数据生成树形结构 const data = { name: "root", children: [{ name: "a", value: "/a", children:

1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .ant-tree-node-content-wrapper{ height:auto; } .ant-tree-node-content-wrapper{ white-space: normal; max-width: 100%; } } ` 2.节点都展开的话 会太高了.也会撑开盒子,影响美观. 解

antd官网上的Checkbox功能只能单独使用,在表格中加入Checkbox也只能点击Checkbox按钮才能实现选中或取消功能 如果我们要实在表格行中点击或在图片列表中点击图片就能实现选中或取消,就需要单独添加事件,然后使用该事件对Checkbox操作的数组进行操作,才能实现该功能, 简单来说就是为需要添加功能的地方再绑定一个事件,与Checkbox操作同一个数据 就可以了 先来看如何实现点击 表格行来选中或取消,这里有一个网上的例子可以贴出来 https://codesandbox.io/

最近空余时间比较多,自己想学习react跟移动端的东西,就选用了antd-mobile库,框架搭好开发过程中遇到个问题,里面绑定的点击事件无效,不仅是antd自带的按钮无效,原生button点击也没反应,网上找了一大堆没有好的解决方案.在调试过程中发现 原来是我在设置底部导航的时候,把内容部分遮挡了,所以肯定点击没反应,解决方案把底部导航加个z-index:-1就可以了. 总解:发现问题的时候不能轻言放弃,多想想问题出线的可能,说不定就会有新的思路.

最近项目中在使用antd的分页组件时发生了第一次点击分页无变化,再次点击时数据为上一次的分页结果,代码如下: setPageIndex = (pagination)=> { const pager = { ...this.state.pagination }; pager.current = pagination.current; this.setState({ pagination: pager, // 设置当前页 }); this.getList(); // 获取数据列表 } 在确认代码无误

问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" :key="index" :show-arrow="false" > <p>{{ text }}</p> <template slot="header"> {{ item.name }}</templ

React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给大家,希望能让读者少踩一些坑! 本文看点 实际项目效果

antd 主页地址:https://ant.design/docs/react/introduce 在使用过程中,不能照搬antd的组件代码,因为有些并不合适.首先,菜单并没有做跳转功能,仅仅是菜单,需要在它的基础方法中添加我们的业务代码. /*菜单组件,所有的方法都要bind this*/ import React,{Component} from 'react'; import {render} from 'react-dom'; import {Link,browserHistory} f

第一步: 要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件: package.json,node工程最基本的要求,类似于Java的pom.xml main.js 创建窗口,工作在electron的主进程 index.html 页面,工作在electron的渲染进程 但由于我们要使用antd, antd基于react,它是一个react工程,所以我们从最简单的react工程 create-react-app开始,为什么不用ant

1.antd Upload默认值问题 需求是这样的,后台若没有图片默认值,则只有上传按钮,且只能上传一张图片:若有默认值,则显示默认头像图片, 可删除,删除之后有且只能添加一张图片,没有删除默认图片时不能添加图片 坑爹之路漫漫----- 图为无默认值时状态 图为有默认值状态,删除后可添加图片 首先设置defaultFileList,但是defaultFileList并不会默认添加到fileList里面 ?"":<Button style={{width:this.props.wi

前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时候,发现 upload 组件的很多bug.下面来列举几个. 备注:本文写于2019-03-02,使用的 antd 版本是 3.13.6. 使用 AntD 的 upload 组件做图片的上传 因为需要上传多张图片,所以采用的是照片墙的形式.上传成功后的界面如下: (1)上传中: (2)上传成功: (3

antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看代码,实现了页面跳转后刷新依然显示刷新前的页面. import React from 'react' import { Pagination, Spin } from 'antd' //引入分页组件 import 'whatwg-fetch' import './agricultural.less'

不知道为什么蚂蚁金服团队没有在ant design的DatePicker中单独给出选择年份的组件,这给我们这种懒人造成了很大的痛苦,自己手造轮子是很麻烦的.毕竟只是一个伸手党,emmmmm..... 然后就打算自己手撸了,首先去偷看了蚂蚁自己组件的样式,打算照着搬下来.后来发现下面的item是用的table布局,这种布局是我最厌恶的,还是换种方式吧,ul>li,嗯,我最喜欢的 然后开始. 代码如下: /** * 使用方法 * 引入: * import YearPicker from "@/

相信大家在使用nextjs的时候,难免遇到一些坑.其实可能大部分原因在于 nextjs 做了很多封装,我们可能不能第一时间搞清楚包括它相关的所有配置,比如其中的webpack配置.我前面也写过 SSR 实现的文章和简单的轮子<实现ssr服务端渲染>,也知道 SSR 要实现为 nextjs 这样的三方框架,还是会需要经历很复杂编码的. 总归有时候遇到问题,在网上也查不到一个正确的解决方案.比如,我为此头痛几天的 antd-mobile 按需加载,最开始我无法正常使用,就只能全局引入 antd-m

引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circle" //按钮圆角(默认为方形) icon = "search" //加图标 ,string (search : 搜索 ,download : 下载 ),也可以直接插入Icon 标签 size = "large" //按钮大小,string 默认 middl

需求说明,一个帐号角色可以设置管理多个项目的菜单权限 且菜单接口每次只能查询特定项目的菜单数据[无法查全部] 开发思路: 1,获取项目接口数组,得到项目数据 2,循环项目数据,以此为参数递归查询菜单数据[递归查询是为保证循环时数据异步请求顺序 不稳定] 3,将菜单数组组装成一个二维数组,以待循环树选择组件作展示 数据使用 4,循环树选择组件,实现树选择菜单功能 5,读取某条用户信息的菜单权限,将返回字符串菜单编码处理成与菜单数据相同的二维数组 6,奖该用户信息的菜单权限数组加载到循环树选择组件作

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.基础表格 Table组件基础Api bordered属性:是否展示外边框和列边框 columns属性:表格列的配置描述(即表头) dataSource属性:数据数组 pagination属性:分页器,设为 false 时不展示和进行分页 <Card title="基础表格"&g

目录 项目简介 在线演示 截图演示 踩坑 项目简介(1/4) Github: https://github.com/bergwhite/v2ex-react 项目使用React.Reac-router.Axios.ANTD UI进行开发 项目兼容移动端 使用Nginx代理V2EX API并支持CORS跨域 另外还写过一个Vue版V2EX项目,v2ex-vue:https://x.bw2.me/#/ 以及nodejs聊天室,nchat:http://y.bw2.me:8086 找工作,北京.联系方

最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 经过一顿试错,终于解决了这个问题. showUploadList,是可选参数,即是否展示uploadList,默认是开启的,showUploadList:true即为展示,效果是当附件上传成功后,会在页面上显示出上传的附件名字记录,如上图所示. 需要解决的问题是:在有上传按钮的弹出框里,当上传附件