react
司宁
每天学习一点点, 每天进步一点点
展开
-
react + antd 多个选择框联动,当前选择的值不显示在其他选择框的下拉数据内
原理是利用setValue的时候会重新运行一遍getOptions函数,这样,任何一个选择框的值发生变化的时候其余三个选择框的下拉数据都会发生相应的改变;需求:展示四个选择框,当第一个选择框选择了数据A后,剩下三个选择框的下拉数据内不展示数据A,第二、三、四,同理;原创 2023-08-24 11:47:26 · 426 阅读 · 1 评论 -
react+antd Table 根据code显示不同的空状态样式
注意要清空上一次返回的data,将dataSource设置为空数组,不然表格只会显示上一次返回的数据,而不是空状态。locale 默认文案设置,目前包括排序、过滤、空数据文案,也可以自定义空数据的样式。图片和提示语都是可以换的,还可以自定义,antd的官方文档都有例子,需求要求返回指定的code得时候显示不同的table空状态提示。在请求表格数据的函数中判断不同的code。最后在Table标签中加入locale。首先要引入空状态组件。原创 2023-06-08 10:42:15 · 402 阅读 · 0 评论 -
react 防抖和节流
节流: 一段时间内只运行一次,若在这段时间内重复触发,只有第一次生效。防抖: 一段时间后在执行该事件,若在这段时间内被重复触发,则重新计时。引入:import _ from 'lodash'节流一般用在按钮上,防抖一般用在搜索上。第三方函数工具库:lodash。安装:npm i lodash。react封装好的防抖和节流。如有问题欢迎讨论指正~原创 2023-01-28 16:43:02 · 1494 阅读 · 0 评论 -
react + antd 表格排序(服务端返回数据)
本地表格排序只需要按照文档描述在Column中加入属性sorter,写入排序方法即可。本地表格排序只能在当前页对显示的数据进行排序,如果想对所有的数据进行排序,需要使用后端返回的数据,这时候属性sorter就不能写入排序方法了,根据文档描述,要改成true。表格的onChange方法会在表格的分页、排序、筛选变化时触发,并且返回pagination, filters, sorter, extra: { currentDataSource: [] },在排序这个需求中我们需要用到的就是sorter参数。原创 2022-11-07 17:49:47 · 3103 阅读 · 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 · 1763 阅读 · 0 评论 -
react+antd树选择下拉框中增加搜索框
ant Design提供的树选择提供了搜索功能,但是这个搜索功能是在树选择的选择框内,现在的需求是要把搜索功能抽离到下拉框中。(官方提供的方法是只要加上showSearch就可以实现搜索功能)。function AdvancedSelect(props) { const [treeData] = props; // 下拉框数据 const [searchValue, setSearchValue] = useState(''); // 搜索框值 const [val, setVal] =原创 2022-05-18 15:15:43 · 2566 阅读 · 2 评论 -
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 · 823 阅读 · 0 评论