![](https://img-blog.csdnimg.cn/20200109171416505.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
dva-umi2-ant-design-pro
ant-design-pro后台管理系统的操作具体实现
前端设计诗
WEB后端攻城狮
展开
-
关于ant-design Table组件selectedRows翻页后不保留上一页已选中items的解决方案
1、2、自己遇到这个问题的时候也查了下其他人的解决方式,但大部分都又长又复杂,所以最后还是自己搞个。3、解决方式定义一个全局变量数组去存放我们最后选择的数组数据let initCLassIdList = [];记得在组件卸载的时候去释放内存 componentWillUnmount() { initClassIdList = null; }所用到的API const rowSelection = { selectedRowKeys, o原创 2021-05-17 15:48:47 · 1919 阅读 · 8 评论 -
ant-design-mobile-Tabs纵向滑动触发切换tab问题解决方式
1、issues在使用这个组件的时候同样遇到了这个问题,也就是纵向滑动的时候会触发到tab切换事件,研究过许多办法,都没有解决,最终决定将原有组件的滑动去掉,自己去实现一个滑动切换tab效果。2、注册Touch事件,可以自己控制左右滑动间距,去减少上下滑动所带来的误触。 onTouchStart = e => { this.startX = e.touches[0].clientX; }; onTouchMove = e => { this.endX = e.原创 2021-04-07 14:09:27 · 1847 阅读 · 0 评论 -
Uncaught Error: must set key for <rc-animate> children on modal(React-select)解决方式
1、2、问题出在于下拉选择的默认值出现了undefined简单处理一下 const newDefaultValue = defaultValue.filter(e => e !== undefined);原创 2021-04-26 14:38:12 · 566 阅读 · 0 评论 -
react-ant-design-Select多选选择器禁用选项处理&&选项数据处理
1、2、实现禁用部分选项用到的是js的some方法 subjects.map(subject => { return ( <Option disabled={haveSelectSubject.some( id原创 2021-04-26 14:13:40 · 3776 阅读 · 1 评论 -
ant-design RangePicker时间选择框默认值设置处理
1、基础,直接上代码,不作过多解释// 做这个处理是为了避免出现invalid date const lastStart = deepStartDate === '' || deepStartDate === undefined ? deepStartDate : moment(deepStartDate); const lastEnd = deepEndDate === '' || deepEndDate === undefined ? deepEndDate :原创 2021-02-27 16:49:34 · 1960 阅读 · 0 评论 -
ant-design 搜索框单独监听allowClear事件
1、2、在方法中打印event.target.tagNametest = (e) => { console.log(event.target.tagName)}你会发现allowClear和Search打印出来是不一样的原创 2021-01-26 19:52:37 · 4500 阅读 · 2 评论 -
react-ant-design输入框输入时拼音字符触发onChange事件(防抖)处理
1、在我们做输入框时,一般会进行字数限定,但是会发现输入拼音的时候,拼音字符也会一直触发onchange事件,导致也会让我们的判断失效。2、下面的方法也是我自己搜索得来,其实场景比较复杂。我的应用场景是非受控的组件下处理。直接在Input中加入handleComposition事件,这个事件内含三种状态:start-update-end;分别对应着开始输入,正在输入,结束输入三种状态。所以我把我的判断移入到这个事件中进行判断。3、具体场景可自行去搜索更详细的解答,这里分享我的代码 // 处理将字原创 2020-12-23 10:12:29 · 4009 阅读 · 0 评论 -
解决ant-design表格固行和列多出空白列的问题
1、问题描述在使用表格组件的时候,使用固定列,可能会遇到当你表头内容小于你设定的值时,会多出一列空白的问题。2、解决以上问题只需要我们动态的去判断当有多少列的时候需要去固定列这个属性。3、4、...原创 2020-11-27 13:59:20 · 4859 阅读 · 0 评论 -
ant-design树选择框生成treeData数据结构
1、使用TreeSelect组件时,我们需要根据接口返回的数据生成官方样例的数组结构2、这里主要是分享代码,代码有根据具体情况命名进行修改,仅供参考 const classGradesData = []; // eslint-disable-next-line no-unused-expressions classTypeSet && classTypeSet.forEach((item, idex) => { // 生成children原创 2020-11-24 22:22:17 · 2620 阅读 · 0 评论 -
react-ant-design实现可拖拽可编辑的表格功能
1、 需求功能:表格可进行拖拽,点击编辑的时候可进行编辑,前两个是input输入框,后面是下拉选择框,可增加可删除。2、查看ant-design组件的时候,会发现拖拽和可编辑表格是两种类型表格。所以我的实现思路是,为了避免两种类型表格杂在一起带来的不确定问题,所以直接引入两种表格,通过变量去控制区使用哪种表格。当我需要拖拽的时候渲染拖拽表格,当我要编辑的时候渲染编辑表格,使用共同的数据即可。3、具体实现代码因人而异,这里我只给出部分觉得可以帮助大家的代码区分渲染编辑状态时是输入框还是下拉选择框原创 2020-11-02 11:29:15 · 4904 阅读 · 2 评论 -
ant-design自定义组件的样式
1、使用ant-design组件的时候,我们有时候需要自定义去改变组件的一些样式。2、这里我们可以只用全局样式定义去改变对应类的样式3、举例我要去改变ListView组件的背景样式 <ListView style={{ overflow: 'auto', height: `${height}px`, }} renderHeader={this.r原创 2020-09-29 20:17:30 · 3210 阅读 · 0 评论 -
ant-design输入框自动获取焦点
需求:在做移动端项目时,引入Input输入框,当使用Input输入框的时候希望自动获取焦点,这样的话在移动端输入法就会自动弹起,方便用户使用。实现: <Input ref={function (input) { if (input != null) { input.focus(); } }} />...原创 2020-09-23 14:07:20 · 13719 阅读 · 3 评论 -
react不同组件中方法监听--eventProxy发布-订阅模式
1、需求问题:在做React-ant-design-mobileAPP项目的时候。当导航栏中的确定重置事件需要刷新列表页。而这两个组件毫无联系。这时候就用到了eventProxy来监听不同组件的方法函数。2、on、one:on 与 one 函数用于订阅者监听相应的事件,并将事件响应时的函数作为参数,on 与 one 的唯一区别就是,使用 one 进行订阅的函数,只会触发一次,而 使用 on 进行订阅的函数,每次事件发生相应时都会被触发。trigger:trigger 用于发布者发布事件,将除第一原创 2020-07-30 22:49:45 · 1372 阅读 · 0 评论 -
react-ant-design日期选择框时间选择限制
1、预期效果2、需要加的限制是不能开始时间不能小于一个日期,结束时间不能超过今天。3、实现代码 this.handleDisabledStartDate = current => { return current < moment(e.props.title) || current > moment(lastEndDate); }; this.handleDisabledEndDate = current => { retu原创 2020-07-02 21:46:59 · 3327 阅读 · 0 评论 -
react-js将时间字符串转换为时间戳进行时间比较
1、在我们需要进行时间比较时,获取的是字符串形式的时间,需要和时间格式进行比较。这时候我们需要将时间两种形式都转换为时间戳来进行比较。具体时间戳怎么定义的我也不清楚,但百度百科中有这么一句:“时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时间的总秒数”。按这个定义,编程语言中倒是有一种类似的函数,getTime(),但这个函数返回的是自1970年1月1日到当前时间的总 毫秒数 ,而不是总 和。2、下面是我的方法调用这段代码的目的是将传入时间(字符串形式)与今天日期进行原创 2020-07-02 21:37:54 · 4059 阅读 · 0 评论 -
react-antd选择器选择多属性传值
1、使用Select选择器时,我们都知道能 使用value值将所选的属性获取。默认根据此属性值进行筛选 function handleChange(value) { console.log(`selected ${value}`);}2、但当我们需要获取多个属性值时,其实选择器也有可选属性供选择。所以当我们需要获取多个属性值时,可将值赋予title与className3、示例: return ( <Option value={index} title={原创 2020-06-20 12:59:23 · 3529 阅读 · 0 评论 -
react-antd-Table相似表格不同字段处理
1、当两个表格字段相似时,但有一两个字段不同,我们可以将不同的字段单独以对象的形式抽出,根据情况push进去即可。2、代码参考 const change = { title: '操作', dataIndex: 'operate', key: 'operate', width: '15%', align: 'center', render: (text, record) => {原创 2020-06-15 17:38:31 · 731 阅读 · 0 评论 -
react-antd-Table组件固定列字段太长(列不对齐)问题
1、当固定列遇到某个字段过长的问题,可对其单独进行宽度限制2、超长字段限制最长宽度并超过省略 render: (schoolName) => { return ( <div className="ellipsis" style={{ float: 'left', maxWidth: '100px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }原创 2020-06-15 17:24:21 · 2320 阅读 · 0 评论 -
react-antd级联选择框(后台数据渲染)
1、默认效果2、这里我们需要实现的是二级级联选择。官方实例给的数组结构是这样的所以我们也要将后台返回的数据构造成这样既可。 const classGradesData = []; singleClassList && singleClassList.forEach(item => { const children = []; //这里是生成children的数据结构 item.classList.fo原创 2020-05-28 10:04:51 · 2769 阅读 · 0 评论 -
react-dva-antd实现页面loading加载效果(首屏优化)
1、预期需要实现效果:为了达到更好的用户交互体验。在我们渲染表格数据的时候,当表格数据改变的时候我们出现加载效果。非使用Spin组件。当接口在调用的时候,我们去控制loading效果。所以我们在models实现。使用到的是Table中的loading属性。2、直接贴出代码 loading: true, =>state====>effects // 查询班级出勤统计数据单天 *inqui..........({ payload }, { call, put })原创 2020-05-23 14:36:22 · 5963 阅读 · 0 评论 -
react使用echarts完整细节实例(后台数据渲染&&布局实现)
1、这是我使用echarts实现的两种图表折线图柱状图2、折线图实现首先导入必须的包,在这之前进行安装npm install echarts --save// 引入 ECharts 主模块import echarts from 'echarts/lib/echarts';// 引入柱状图import 'echarts/lib/chart/line';// 引...原创 2020-04-15 14:25:09 · 1831 阅读 · 0 评论 -
antd-select下拉框同时获取所选值id和名字属性
1、预期实现需要得到id和name的值然后传入接口2、给当前的选择框绑定回调事件一般我们需要获取一个值得时候是这样写 changeGoodsName = (value) => { this.setState({ goodsId: value }) }而现在需要两个值 changeGoodsName = (value, e) =&...原创 2020-04-13 14:45:27 · 8955 阅读 · 1 评论 -
antd-select选择框联动(后台数据)解决
1、预期实现效果2、这是后台返回数据模式3、思路:根据typeId选择来获取绑定到第二个下拉框的数据选择4、实现步骤开始的时候对typeId进行定义初始化-给第一个下拉框绑定回调事件,更新当前的typeId值根据typeId 去循环遍历第第二个选择款数据 // 获取物品名称 const goodsNames = (goodsListType || [])....原创 2020-04-13 14:39:03 · 5853 阅读 · 0 评论 -
React-antd日期选择框日期初始化问题(invalid date)解决
1、2、在使用日期选择框的时候,当我们没有进行初始化,并格式化日期时,会出现以下情况3、解决方法:在state初始化时给予日期值为undefined在日期选择框中进行判断 <DatePicker style={{ width: '110px' }} placeholder="开始日...原创 2020-04-09 16:25:20 · 13863 阅读 · 1 评论 -
ant-design表格序号分页连续自增设置
1、预期效果2、设置表格的序号排序方式,我们首先是要到表格序号渲染的位置去修改注意索引值需要+13、我所调用的方法是所需要的参数是当前的页数,当前页的大小,和索引值export function serialNumber(pageIndex, pageSize, index){ return (pageIndex-1) * pageSize + index;}...原创 2020-03-24 10:59:42 · 2587 阅读 · 1 评论 -
设置文本省略号移入显示布局不变完整完美解决方案
1、.reject { float: left; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.reject:hover { white-space: normal;}原创 2020-02-28 15:17:29 · 720 阅读 · 0 评论 -
react-ant-design动态渲染可滑动表格组件
1、预期效果当我们的表格所需要渲染的列数很多的时候,我们需要的是可滑动效果2、所有的数据都是后台渲染而来首先需要的是给列固定宽度在所使用的表格组件中加入scoll属性...原创 2020-03-11 10:41:07 · 1003 阅读 · 0 评论 -
react-dva-ant-design-pro在编辑侧边菜单栏(添加徽标)
1、需求在菜单侧边栏指定项添加徽标指数2、找到指定文件路劲3、添加徽标原创 2020-03-04 15:12:17 · 3583 阅读 · 2 评论 -
Ant Design的DatePicker组件禁用日期选择范围(结束日期大于开始日期)禁用状态
1、日期选择框2、 <DatePicker disabledDate={this.disabledRegistrationStartDate} //这里是设置时间选择范围 和禁用状态 showTime={{defaultValue:moment(currentTimeFormat,'HH:mm')}} ...原创 2020-03-02 16:55:46 · 8075 阅读 · 0 评论 -
ant-design-pro表格多选操作后还会默认勾选的解决办法
1、其实官方文档有给出解决方案2、具体解决代码如下在这里插入代码片 onSelectChange = (selectedRowKeys, selectedRows) => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowK...原创 2020-02-28 15:02:30 · 1517 阅读 · 0 评论 -
react-ant-design实现Modal输入框实现联想输入
1、预期实现效果2、核心代码 <div className={styles.opinionList} style={ideaList}> {opinionList.map((item,index)=>{ return( <div className={styles.opin...原创 2020-01-16 13:54:05 · 3398 阅读 · 0 评论 -
react-ant-design带有下拉框选择的搜索功能实现详解(表格组件的使用)
1、预实现效果2、首先我们使用的是调用的是公共的封装组件,表格组件的封装在另一篇文章中。封装组件使用在本页面中向子组件传入这些方法3、然后开始单独实现每一个方法,这里首先列表有数据当然需要先渲染数据,这里怎么渲染在我的另一篇文章中有。当然查询都是调同一个接口。查询状态 // 查询状态 handleChangeRegistrationState = (value) =&...原创 2020-01-15 18:32:51 · 7046 阅读 · 0 评论 -
react-ant-design表格组件列表数据渲染
1、需要渲染一个表格2、这里就不说表格头部标题的渲染了,自己设置就行,直接讲的是表格数据渲染dataSource={data}3、数据渲染 数组数据的来源于接口数据 拿到接口数据之后我们经过遍历之后进行渲染 const data = []; dataList && dataList.forEach((item, index) => { //这里&...原创 2020-01-14 14:31:54 · 3287 阅读 · 0 评论 -
react-ant-design组件封装抽取之表格页面封装举例(组件封装方法)
1、 需要封装的组件包括两个下拉框,一个搜索框,和一个表格列表2、封装的组件代码import React, { Component, Fragment } from 'react';import { Card, Select, Input, Table } from 'antd';import { constants } from '../../../utils/constants';i...原创 2020-01-14 11:30:39 · 2286 阅读 · 1 评论 -
react-ant-design 携带id进行页面跳转
1、应用场景:在表格列表中你需要跳转查看数据列表的详情,那么这个时候你就需要携带数据的id进行跳转了。2、首先,我们使用的是react中的routerRedux进行跳转,所以在头部需要先进行引入import { routerRedux } from 'dva/router';3、进行跳转 // 点击报名主题 进入报名详情页面 handleGoToDetail = (Id) =>...原创 2020-01-14 09:57:07 · 1982 阅读 · 0 评论 -
React中拼接HTML代码,后端返回的是<p>段落</p>格式文件举例
1、效果2、业务场景:前端需要请求后端数据渲染,后端接口数据返回的是HTML段落格式()3、实现方法页面代码const newDescription = description.replace(/</g, '<').replace(/>/g, '>'); let Informations = null; if(newDescription){ Inf...原创 2020-01-14 09:10:55 · 1306 阅读 · 0 评论 -
React遇到×Unhandled Rejection (Error): Maximum update depth exceeded.情况之一解决
1、×Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of n...原创 2020-01-03 11:29:14 · 5576 阅读 · 0 评论 -
React-ant-design-pro项目搭建侧边菜单栏构建问题
1、菜单构建其实很简单,就涉及到三个文件,具体路径请看截图2、要进行菜单设置,首先第一步你需要在menu.js文件中定义好,3、接下来你只需要在router.config.js设置好路径4、就这样就可以了 ,然后pro会自动在router.js中生成相关代码...原创 2019-12-31 14:45:02 · 1413 阅读 · 0 评论 -
React-ant-design关于Modal中Confirm内部中this指向问题
1、 这是官方组件代码,这里需要注意的是在confirm中,this指向永远在其内部中,这就是容易踩坑的点。confirm({ title: 'Do you want to delete these items?', content: 'When clicked the OK button, this dialog will be closed after 1 second',...原创 2019-12-31 13:51:32 · 2575 阅读 · 0 评论 -
React-ant-design表格组件进行批量删除方法(案例详解)
1、在表格组件中需要进行批量删除2、首先我们需要传回的参数为所选中的id数组,在删除事件绑定相应的方法,在方法中我们要实现的是将选中删除的数据的id传回到后台中去,而接口中的id会在selectedRows中所有我们将这里的selectedRows更新selectedRows中,当然在初始的state我们定义为空3、回到删除方法中 handleDeleteOk = () => ...原创 2019-12-30 15:56:15 · 6897 阅读 · 3 评论