- 博客(22)
- 收藏
- 关注
RSS订阅原创 react+antd 解决多选的下拉选项中存在“全部”的问题
例如：选中“未开始”，“进行中”，“已结束”，“已关闭”，那么展示在页面的选中项应该仅为“全部”4.在第一个选择了除“全部”外的任意一项后选择了“全部”——最终显示选择的项目应为“全部”例如：第一个选择了“未开始”，第二个选择了“全部”，那么展示在页面的选中项应为“全部”例如： 第一个选“全部”，第二个选“未开始”，那么展示在页面的选中项仅为“未开始”1.选择了“全部”后，选择了其他选项——最终显示选中的选项排除“全部”2.选择了除“全部”外的所有选项——最终显示选中的选项应该仅有“全部”
2023-10-23 16:08:27
317
原创 react + antd 多个选择框联动，当前选择的值不显示在其他选择框的下拉数据内
原理是利用setValue的时候会重新运行一遍getOptions函数，这样，任何一个选择框的值发生变化的时候其余三个选择框的下拉数据都会发生相应的改变；需求：展示四个选择框，当第一个选择框选择了数据A后，剩下三个选择框的下拉数据内不展示数据A，第二、三、四，同理；
2023-08-24 11:47:26
489
1
原创 react+antd Popconfirm 使用异步关闭设置点击空白处关闭
Popconfirm在异步关闭的时候点击空白处无反应，这里可以手动设置，让Popconfirm可以点击空白处关闭。代码不全，没有写import，主要代码为visivleChange。Popconfirm有个API为。
2023-06-09 10:41:26
1166
原创 react+antd Table 根据code显示不同的空状态样式
注意要清空上一次返回的data，将dataSource设置为空数组，不然表格只会显示上一次返回的数据，而不是空状态。locale 默认文案设置，目前包括排序、过滤、空数据文案，也可以自定义空数据的样式。图片和提示语都是可以换的，还可以自定义，antd的官方文档都有例子，需求要求返回指定的code得时候显示不同的table空状态提示。在请求表格数据的函数中判断不同的code。最后在Table标签中加入locale。首先要引入空状态组件。
2023-06-08 10:42:15
448
原创 react 防抖和节流
节流: 一段时间内只运行一次，若在这段时间内重复触发，只有第一次生效。防抖: 一段时间后在执行该事件，若在这段时间内被重复触发，则重新计时。引入：import _ from 'lodash'节流一般用在按钮上，防抖一般用在搜索上。第三方函数工具库：lodash。安装：npm i lodash。react封装好的防抖和节流。如有问题欢迎讨论指正~
2023-01-28 16:43:02
1516
原创 react + antd 表格排序（服务端返回数据）
本地表格排序只需要按照文档描述在Column中加入属性sorter，写入排序方法即可。本地表格排序只能在当前页对显示的数据进行排序，如果想对所有的数据进行排序，需要使用后端返回的数据，这时候属性sorter就不能写入排序方法了，根据文档描述，要改成true。表格的onChange方法会在表格的分页、排序、筛选变化时触发，并且返回pagination, filters, sorter, extra: { currentDataSource: [] }，在排序这个需求中我们需要用到的就是sorter参数。
2022-11-07 17:49:47
3407
2
原创 JavaScript将数据处理成树形结构
第一个方法是使用递归，可以处理多层嵌套。（react的value值和key值不一样是会报错的，而且key值要唯一，如果这组数据需要带有搜索功能的话是要设置treeNodeFilterProp来指定根据哪个字段来搜索的）。如果传进来的数据保证是有字段的可以省略判断的步骤，递归这个方法也可以结合第二个方法让代码看起来更简洁。function toTree(data) { for (let i = 0; i < data.length; i++) { data[i].value =
2022-05-18 15:38:18
1795
原创 react+antd树选择下拉框中增加搜索框
ant Design提供的树选择提供了搜索功能，但是这个搜索功能是在树选择的选择框内，现在的需求是要把搜索功能抽离到下拉框中。（官方提供的方法是只要加上showSearch就可以实现搜索功能）。function AdvancedSelect(props) { const [treeData] = props; // 下拉框数据 const [searchValue, setSearchValue] = useState(''); // 搜索框值 const [val, setVal] =
2022-05-18 15:15:43
2666
2
原创 柱状图X轴文字倾斜显示
xAxis: { type: 'category', data: Data, axisLabel: { rotate: 30, // 倾斜的度数 },},一般用于X轴文字显示不全才需要倾斜显示，另一种可以显示全部文字的方法是文字纵向显示（一般不推荐，因为不方便看）xAxis:{ axisLabel:{ formatter:function(v.
2022-05-09 15:52:41
2225
原创 解决react路由跳转传参刷新页面后参数丢失问题
import { useHistory } from 'react-router-dom';const history = useHistory();history.push({ pathname: '/details', state: { name: name, id: id, },});在history中使用state确实可以传参数，在进入页面时可以正常显示，但是在刷新页面后state里面的数据会清空，页面就无法正常显示。.
2022-04-14 14:02:46
8390
8
原创 react-todolist
（todolist页面图）import { React,Component } from "react";import './todoList.css';import { Input ,Checkbox ,Button} from 'antd';class TodoList extends Component { constructor(props) { super(props); this.state = { listvalue:[ { i..
2022-03-25 11:47:07
841
原创 深度优先搜索-图像渲染
题目来源：力扣链接：力扣var floodFill = function(image, sr, sc, newColor) { let imagewight = image[0].length; let imageHeight = image.length; let oldcolor = image[sr][sc]; if(oldcolor == newColor){ return image; } // 深度优先搜索（用到了递归）
2022-03-23 14:46:51
271
原创 广度优先搜索-图像渲染
题目来源：力扣链接：力扣var floodFill = function(image, sr, sc, newColor) { let imagewight = image[0].length; let imageHeight = image.length; let oldcolor = image[sr][sc]; // 如果这个位置的颜色与新颜色一样这个image就不需要做出改变 if(oldcolor == newColor){ re.
2022-03-23 12:46:08
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人