antd
wangzhe123_
岁月如沙砾、如川流
展开
-
antd Table默认全部选中
react + antd Table设置默认选中全部原创 2022-11-07 16:01:25 · 2710 阅读 · 0 评论 -
React+antd 限制antd的TreeSelect选择个数
项目中提到的一个需求,限制TreeSelect的选择个数,例如选择国家,最多只能选择三个。想到的办法有好几个,例如在选择的时候判断已选择的个数,如果有三个了就将TreeSelect的disabled设为true,但是这个方法会导致不能修改,例如想换一个国家,控制起来反反复复比较麻烦。后来找到一个其他方法,在一个文章里看到的,作者忘记了(抱歉);先把最优解决办法放上来吧。Form表单有一个validator方法,此方法可以获取到TreeSelect已经选择的值以及长度<Col {...ColL原创 2021-10-25 11:00:38 · 1447 阅读 · 0 评论 -
Antd Datepicker设置默认值不生效
react+antd的项目。没有使用Form表单,只是单独使用了DatePicker组件,前期想的是,根据接口返回的日期数据,如果有值就将DatePicker的defaultValue的值设置为接口的数据,否则的话展示当前日期,我在DatePicker标签内使用了三元判断:const [Info,setInfo] = useState({}); <DatePicker defaultValue={Info.time === null ? moment() : Info.time } forma原创 2021-09-07 17:27:45 · 5307 阅读 · 0 评论 -
react + antd实现表头居中对齐表体右对齐
项目中的一个需求,让表格内的金额数据靠右展示,其余都居中显示,那么表头肯定不能一块居右,因为其他表头都是居中的,偶尔一个居右影响美观。刚开始设想的很好,所有表头统一设置的居中显示,那么表体单独设置居右就可以了const columns = [ { className: "columnHead", //columnHead里面设置了居中的样式 title: "预计费用", dataIndex: "yjfy", width: Tab原创 2021-08-30 09:57:43 · 4530 阅读 · 0 评论 -
React+antd动态增加Table可编辑行
根据antd官网的可编辑表格例子来实现,新增的可编辑的单元格为一个子组件,由Table引入。对于原理理解有限,欢迎探讨。以项目中的活动日程组件的新增日程信息为例实现过程先定义变量const EditableContext = React.createContext();Table部分的代码<EditableContext.Provider value={form}> <Table components={components} size="small"原创 2021-08-26 15:27:59 · 10548 阅读 · 15 评论 -
React+echarts+antd实现折线图
使用echarts实现折线图功能,并加入antd的Tabs切换,先贴个图如上图,我分出了三个Tabs预想的是将echarts折线图封装为一个子组件,然后三个Tabs都引入该子组件,实现切换的时候都是同一个组件,只不过渲染不同的数据源。然而,现实与预想并不相同,我在三个Tabs的TabPane标签下都引入了,相当于创建了三个echarts,而此子组件里面的echarts使用的ID元素是同一个,一个页面中相同ID名字的元素只能有一个,可能是这个原因导致了我切换Tab的时候,折线图的数据并不会随着更新,这种原创 2021-08-26 14:53:23 · 1589 阅读 · 0 评论 -
antd的Upload组件常用的mime类型
//xls.xls application/vnd.ms-excel.xltx application/vnd.openxmlformats-officedocument.spreadsheetml.template.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.doc application/msword.docx application/vnd.openxmlformats-officedocume原创 2021-07-08 17:20:31 · 169 阅读 · 0 评论