- 博客(16)
- 收藏
- 关注
RSS订阅原创 react antd实现竖向表头表格
平时大多做的表格都是横向表头的表格，突然有一次需求是竖向表头的表格，之后发现了Descriptions这个组件,这个组件的名称是描述列表，一开始都没想到这个会跟表格有关系实现的竖向表头表格代码如下<div style={{ width: 500 ,border:'1px green solid',marginTop:'20px',padding:'20px'}}> <Descriptions title="竖向表头表格" bordered column={2}>
2021-12-24 09:27:52
5059
2
原创 react中使用Echarts
import React, { useEffect, useRef } from 'react'import * as echarts from 'echarts' //(*===所有)，导入所有 并命名为echartsconst Echarts = () => { const chartRef = useRef() const options = { // 标题 title: { text: "柱状图" .
2021-10-26 11:44:52
5280
原创 wangeditor富文本与react antd表单结合
如上图，在输入框里输入的富文本内容，在点击确定按钮后会解析到下方“富文本内容”处展示下面是完整代码import React, { useEffect, useState } from 'react'import { Form, Button} from 'antd'import E from 'wangeditor'const IndexPage = () => { const [form] = Form.useForm() const [content, setContent].
2021-10-25 17:10:38
863
原创 css填充容器背景色，一半一种颜色
background: linear-gradient(to right, #C3002F 50%, #e8e8e8 0);
2021-10-21 14:44:52
2109
原创 video视频播放
点击中间播放按钮，视频开始播放，视频播放的时候中间按钮隐藏，播放完毕按钮出现<div className='video'> <video id='video' style={{ height: 'auto', width: '100%' }} controls={play === true ? 'controls' : ''}> <source src='https://' type='video/mp4'></source> <
2021-10-19 17:11:15
14089
原创 react 实现显示时长并继续计时的计时器
需求：如一个订单创建的时间为time1，过了一段时间后，查看这个订单生成的时长，要求显示成00:00:00的形式，并继续计时下去思路：在定时器中的每一秒用订单创建时间的时间戳减去当前时间戳，计算这个数的时长是多少<FormItem {...formItemLayout} label='预约单生成时长'>{listDuration}</FormItem>constructor(props) { super(props) this.state = { .
2021-10-15 16:17:36
871
原创 react antd Cascader组件省市区级联动态加载
省市区是一级一级加载的，每点击一级发送一次请求加载数据，出现下一级内容（页面挂载完成默认显示第一级数据）<FormItem {...formItemLayout} label='安装位置'> {form.getFieldDecorator('address', { initialValue: [rowValues.address.substring(0, 3)], rules: [{ required: true, message: '安装位置不能为空！' }.
2021-10-15 15:44:33
1939
原创 antd3 Select组件中setFieldsValue和getValueFromEvent的尝试
如上图使用了Select组件，我选的是多选框，多选框会显示所有选中项的值。但这里有个需求：当选择的项是“全部”的时候，框里只保留“全部”这个值；若不选择“全部”，则显示所有选中项的值。一开始尝试在onchange事件里用setFieldsValue去设置框里的值，但是一直没有作用，后来尝试getValueFromEvent这个api，成功设置。官方文档说明getValueFromEvent是可以把 onChange 的参数（如 event）转化为控件的值<FormItem {...formI.
2021-10-15 15:25:08
2411
原创 react antd3 级联Cascader初始值设置
<FormItem {...formItemLayout} label='安装位置' > {form.getFieldDecorator('address', { initialValue: ['zhejiang','hangzhou','xihu'], rules: [{ required: true, message: '安装位置不能为空！' }], })( <Cascader options={this.options} onChange
2021-09-29 14:16:22
1755
原创 Modal联合Form表单，用Modal底部按钮提交表单验证而不是用Form表单自带提交验证的方式
①将表单提交按钮设置给Modal底部footer属性 <Modal title="新增" visible={isModalVisible} onCancel={handleCancel} centered={true} mask={true} footer={ <Form.Item> <Button type="primary" htmlType="submit" onClick={onFinish}> 提交 &
2021-09-07 11:10:55
1255
原创 docker项目发布
docker流程理解：按我的理解：主镜像（如nginx）就像一个大空间大房子，所有项目镜像都是在这个大房子里运行，docker一开始要把这个主镜像拉取下来，然后将项目打包成一个小镜像，这个小镜像里存在着一个容器，容器里装着项目，docker就推动这个包裹着容器的镜像推到主镜像里去运行。步骤：1、在项目根目录下创建一个Dockerfile文件和nginx文件2、项目打包成dist包3、从镜像仓库拉取主镜像，docker pull 镜像名，可以通过docker images查看镜像列表例：docke
2021-09-07 10:58:55
287
原创 react网络请求数据初始为空影响页面渲染的解决
发送网络请求获取的数据，初始是空的useEffect(() => { dispatch({ type:'data/fetchData', payload:null }) },[])如做Table表格，直接把数据赋给dataSource，组件渲染比较快，此时渲染的数据是空的，直接报错<Table dataSource={data.list} columns={columns} />可先对数据进行判断，数据不为空时赋数据值，否则先给dat
2021-07-21 10:38:48
1626
原创 umi整合dva
①数据使用mockjs模拟import mockjs from 'mockjs';export default{ 'GET /api/tags': mockjs.mock({ 'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }], }),}②为了结构清晰，单独建一个service.ts文件进行request请求import { request } from 'umi';export
2021-07-20 14:34:19
117
原创 umi mock数据请求
一、自己模拟数据在mock目录下新建一个user.ts文件，模拟一个用户信息的数据export default{ 'GET /api/users':{ name:'tom', age:18 },}发送网络请求，这里我用的是umi内置的requestimport { request } from 'umi';export default function IndexPage() { const getUser = () =>{
2021-07-20 09:54:59
1154
原创 yarn create @umijs/umi-app报错 ：文件名、目录名或卷标语法不正确
创建umi项目时输入yarn create @umijs/umi-app，报错 ：文件名、目录名或卷标语法不正确解决方法：①找到create-umi-app.cmd文件，即在D:\node_cache\bin目录下，将“%~dp0\”删掉②重新打开cmd，输入create-umi-app，成功创建（这里不用重新输yarn create @umijs/umi-app，否则会覆盖掉之前修改过的create-umi-app.cmd文件）...
2021-07-19 17:29:48
346
原创 react小练习-antd Form表单和Table表格的交互-Table动态添加数据
这里写自定义目录标题功能实现效果代码背景代码思路代码实现功能实现效果点击添加按钮，输入表单内容，表单提交后数据动态添加到Table表格里如图： 初始数据，是在dva的mock文件模拟的死数据点击添加，输入数据: 表单提交后，数据添加到表格里代码背景表单和表格是两个独立的组件，且各自获取后台mock数据代码思路在表单设置一个空数组用来存储每次表单提交的数据，将数据加入到原有的初始数据数组中，更新数组将更新后的数据通过消息订阅与发布机制传递给表格组件，表格组件setState更新数据从而
2021-04-22 16:38:54
4331
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人