- 博客(66)
- 收藏
- 关注
RSS订阅原创 React修改react-immer只读数据
react报错Uncaught TypeError: Cannot assign to read only property 'isCheck' of object '#<Object>' at onChange。const [dataArr , setDataArr ] = useState(dataArr)//数组类型。//该函数操作的只是draftState，对immer源数据不收影响。
2023-04-11 10:48:34
616
1
原创 React使用forward和useImperativeHandle实现父组件调用子组件
【代码】React使用forward和useImperativeHandle实现父组件调用子组件。
2022-08-19 22:58:56
397
原创 React报错Uncaught ReferenceError: process is not defined
修改react-error-overlay的版本为6.0.9即可解决npm install react-error-overlay@6.0.9
2022-07-12 11:45:07
1327
原创 css图片不显示居中
img{ object-fit: cover; background-size: cover; background-repeat: no-repeat; background-position: 50%; position: absolute; width: 100%; height: 100%;}
2022-05-30 09:58:56
347
原创 JS使用map对数组进行处理，删除数组里面的数据
images.map((element, index) => { if (element.id === item.id) { images.splice(index, 1) } })let arr=[ {name:'名称1',id:'1'} {name:'名称2',id:'2'} {name:'名称3',id:'3'}]......
2022-05-26 00:43:25
4694
原创 vue对时间进行限制，只能选择当前时间之前的日期
<el-date-picker class="el-input2" clearable v-model="value2" type="daterange" range- separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" :disabled-date="disabledDate"/>data(){ return{ disable..
2022-05-25 15:14:35
993
原创 React对带有日期的数组进行排序
使用ES6里面的sort方法可实现排序功能 //对数组根据日期进行排序 sortDataArray(dataArray) { return dataArray.sort(function (a, b) { return Date.parse(b.createTime.replace(/-/g, "/")) - Date.parse(a.createTime.replace(/-/g, "/")); }); }传入数.
2022-05-20 14:56:15
889
原创 zTree有子集就不显是勾选框
// 处理json数据 getJSONData(msg) { for (let i = 0; i < msg.length; i++) { if (msg[i].children) { msg[i].nocheck = true this.getJSONData(msg[i].children) } ..
2022-05-16 13:43:53
106
原创 ztree不显示父级的复选框 查看当前被选中的节点的级数
//去掉一级复选框 getChecked = () => { //获取到zTree let allNodes = this.zTreeCatalog.getNodes() if (allNodes.length > 0) { for (let i = 0; i < allNodes.length; i++) { if (allNodes[i].isParent) { ..
2022-05-11 14:32:54
1229
原创 react前端进行导出excel表格
import { downloadFile } from './processors';import ExportType from './ExportType';export interface IOption<R = void> { data: object | string; fileName?: string; extension?: string; fileNameFormatter?: (name: string) => string; .
2022-05-09 17:43:24
689
原创 JS对数组里面为null的数据替换成空
dataSource.map(d => { Object.keys(d).forEach((k) => d[k] = d[k] || ''); arr.push(d) })
2022-05-09 17:41:47
2239
原创 vue使用ztree增加删除，修改和添加等的页面样式
<template> <div> <ul id="tree" class="ztree customZTreeStyle"></ul> <h3 class="iconfont dzyjwodekanjia">icon</h3> </div></template><script>import $ from '../../../utils/jque.
2022-05-08 00:11:04
694
原创 查看formData里面的数据内容
let formData = new FormData(); for (let i = 0; i < direction.length; i++) { formData.append('file', direction[i]) formData.append('buckName', 'interfacedata') formData.append('related_id', '1111111')...
2022-04-21 18:26:32
4640
原创 在vue中使用ztree插件
ztree安装 "ztree": "^3.5.24", "jquery": "^3.4.1"jQuery文件 (jquery-vendor)import $ from 'jquery';window.$ = $;window.jQuery = $;export default $;ztree页面使用<template> <div> <ul id="tree" class="ztree"></ul>
2022-04-20 00:19:20
2592
1
原创 React使用Table组件，点击分页获取所有勾选的数据
//获取所有勾选的数据 onSelectHandle = (record, selected) => { const {selectedRowKeys} = this.state; let arr = []; if (selected) { arr = Array.from(new Set([...selectedRowKeys, record.id])) } else { ar..
2022-04-14 18:17:54
1474
原创 React使用antd里面的Select实现下拉带添加的功能
import React, {Component} from 'react';import {Select, Divider, Input, Typography, Space} from 'antd';import {PlusOutlined} from '@ant-design/icons';const {Option} = Select;class DropdownToAdd extends Component { state = { items: ['jack'.
2022-04-10 15:56:01
2552
原创 React使用antd里面的Table组件，表格可自由控制列宽
import React, {Component} from 'react'import {Resizable} from 'react-resizable';import 'react-resizable/css/styles.css' //要引入样式import {Table} from 'antd';import '../../assets/style/updateCart.css'const ResizableTitle = props => { const {onRe.
2022-04-10 14:57:53
5152
1
原创 React使用upload上传图片，格式为卡片模式
注释：listType="picture-card" ,文件上传的类型；name='file' ; 后台需要的键名；data={{dataId: treeDataId}}额外想给后台传递的参数import React, {Component} from 'react';import {Upload, Modal} from 'antd';import {PlusOutlined} from '@ant-design/icons';import commonConfig from...
2022-04-09 21:03:43
1328
原创 react文件上传
使用React实现文件上传的功能import React, {Component} from 'react';import {Upload, message, Button} from 'antd';import {UploadOutlined} from '@ant-design/icons';import commonConfig from "../../static/js/commonConfig";class SearchData extends Component { stat
2022-04-02 00:39:57
7748
2
原创 swiper使用教程
第一步：点击获取swiper，点击下载Swiper，下载需要版本的swiper压缩包第二部：在html页面使用，需要将下载文件里的css，min.css以及js,min.js放到自己的文件夹下自己的文件html的代码结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
2022-03-31 23:16:02
10074
原创 JS将普通数据转换成一个树状结构的数据
const rootList = [ { id: 1, parent: null, text: '菜单1' }, { id: 11, parent: 1, text: '菜单1-1' }, { id: 12, parent: 1, text: '菜单1-2' }, { id: 2, parent: null, text: '菜单2' }, { id: 21, parent: 2, tex.
2022-03-31 01:20:23
2286
原创 ES6对数组进行处理
let arr = ['张三', '李四', '赵五', '王六', '十八', '双双']; //使用 forEach 循环，一旦开始无法在中间停止 arr.forEach((item, index) => { if (item === '赵五') { console.log(index) } }) //使用 some 循环，可用于查询数据 arr.some((item, index...
2022-03-22 22:49:33
282
原创 Vue使用type=‘file‘上传头像
vue使用type='flie'上传文件：也可以使用ref获取到文件的信息1.首先要获取到图片信息；2.通过发送请求将图片信息传递给后端，后端会进行图片上传的操作；<div> <lable>头像上传：</label> <input type='file' @change="updateImages($event)"/></div>updateImages(event){ //1.获取图片信息..
2022-03-21 23:37:32
843
原创 leaflet的基础用法
leaflet的基础知识1. divIcon自定义图标var myIcon = L.divIcon({className: 'my-div-icon'});L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);2.featureGroup 创建一个特征组，可选择给定一组初始层和一个options对象L.featureGroup([marker1, marker2, polyline]) .bindPopup('Hello world!
2022-03-10 23:05:32
1217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人