Ant Design Pro的一些坑
灯光下的投影
这个作者很懒,什么都没留下…
展开
-
自己写一个含有周、月、年模式的日历组件
写这样一个组件的初衷项目用的是antd的组件,一开始用antd上面的日历组件本来没什么问题,感觉挺好用的,可是某一天需求人员说要求日历只展示一周或半个月,然后我就懵逼了,antd上面的日历组件根本就没有周模式的,只有月和年模式,再说,感觉根本没必要啊,但是用户强烈要求有这个功能,没办法,只能自己写一个了。...原创 2021-01-13 10:30:58 · 1331 阅读 · 9 评论 -
对antd表格中虚拟列表的整合和封装
由于用户反馈页面过于卡顿,考虑到后台总是返回大量的数据,于是表格性能对页面流畅的影响还是挺大的,由于本身能力有限,然后发现antd表格中有一个虚拟列表功能,但是发现功能只能纯粹展示大量的数据而没有其它的交互,而且我开发的项目用的react还是15.x版本的,没办法,只能自己去看看能不能改造一下。目前整合了项目常用的分页和可伸缩列两个功能,本来还想整合固定列以及可选择,但是还没有成功。。。virtualTable.js:import React from 'react';import './virtu原创 2020-09-02 16:19:40 · 3582 阅读 · 2 评论 -
解决antd select支持既能输入不存在的选项又能进行下拉框选择
最近有这样一个需求:在antd select中既能手动输入不存在的内容又能选择下拉框的选项。我当时一想,这个简单啊,于是就开干思路是这样的,给select框中添加onChange事件以解决进行下拉框选择的问题,然后添加onSearch事件来解决手动输入不存在的内容的问题:<Select allowClear showSearch placeholder="请选择" o...原创 2020-01-08 10:54:22 · 13087 阅读 · 3 评论 -
解决antd的select下拉框因为数据量太大造成卡顿的问题
相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了。当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威。。。。想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡...原创 2019-12-25 18:01:04 · 22159 阅读 · 3 评论 -
解决antd表格分页后依然加载慢的问题
antd的表格也用了不少次了,但是有时候数据量也比较大(几千条),所以加载会非常的慢(慢到无法忍受),但是后端的兄弟也比较懒,直接一股脑把数据扔给我,而我只能自己来分页而且还要加快加载速度,于是我就想到了antd里面的Pagination组件但是用过后发现分页是分页了,大师加载速度依然不快,还是需要优化,所以我觉的之所以会这样可能是因为虽然分页了,但是所有的数据依然渲染了,只是其它页没有展示出...原创 2019-12-17 10:17:16 · 3370 阅读 · 2 评论 -
对antd中的表格筛选进行改造
import React from 'react';import './App.css';import { Table, Input, Button, Icon, Checkbox, Row, Col } from 'antd';import Highlighter from 'react-highlight-words';const CheckboxGroup = Checkbox.Gr...原创 2019-11-28 23:47:47 · 3125 阅读 · 0 评论 -
antd中如何将表格的所有数据一次性全选
今天后端的兄弟给我提了一个需求(我们的需求都是后端提的,而不是产品经理。。。),表格数据是分页的,不管在哪一页点击全选,都要选中所有的数据,而不仅仅只是当前页的数据,大家都知道,ant design中表格如果分页的话点击全选只能选中当前页的数据,如果仅仅只是这样那还好办,关键是数据中有很多数据是不可选中的,有时候一整页都不可选中,如下图这样:禁用功能的代码官网上面有详细的说明,就是通过rowS...原创 2019-10-28 16:26:22 · 7997 阅读 · 7 评论 -
运行Ant Desgin的时候反馈:Sorry, we need js to run correctly!
Sorry, we need js to run correctly!翻译成中文的话就是“抱歉,我们需要js才能正常运行!”的意思然后看了一下config.js的配置文件,发现是未开启反向代理,开启反向代理后项目就可以正常启动了:proxy: { '/api': { target: 'http://172.16.238.53:10034', // 目标服务器 c...原创 2019-10-24 17:55:06 · 8886 阅读 · 0 评论 -
用Ant Design Pro框架写的项目在ie浏览器中打不开
今天前端同事和我说项目在ie浏览器中有问题打不开,我试了一下果然不行。问题就是下图这样的:由于我都是用谷歌浏览器开发项目的,所以这个问题没有第一时间发现。然后问公司大佬,但是大佬没有碰到过类似的问题,然后又在网上查资料但是还是没事没有解决问题。于是只能一个一个的去排除,最后发现有两个js文件有问题,然后对这两个文件排除最后发现是文件引入了项目不存在的东西:import { throwStat...原创 2019-10-24 17:38:17 · 1982 阅读 · 2 评论