![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Ant Design
qq_41315539
这个作者很懒,什么都没留下…
展开
-
antd 树结构数据可拖拽表格
场景管理后台的树级结构菜单列表,需要可以通过鼠标拖拽修改菜单的层级结构代码import React from 'react'import { Table,Card,Form } from 'antd';import { DndProvider, DragSource, DropTarget } from 'react-dnd';import {HTML5Backend} from 'react-dnd-html5-backend';let dragingIndex = -1;cl原创 2021-11-15 10:10:54 · 2342 阅读 · 2 评论 -
react hook
import React, { useState, useEffect } from "react";import ReactDOM from "react-dom";function Demo() { // 作用函数 const [count, setCount] = useState(0); // 副作用函数 可以有多个 // 相当于 componentDidMount 和 componentDidUpdate: // 相当于 第一次渲染完成后 和 每次更行渲染完成后 .原创 2021-08-18 16:36:25 · 80 阅读 · 0 评论 -
ant-design-mobile 样式按需加载
1、安装按需加载组件: npm i --save-dev babel-plugin-import2、运行 npm run eject3、修改package.json文件"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd-mobile", "li...原创 2020-12-01 15:47:13 · 481 阅读 · 1 评论 -
Ant Design 使用Tabs和Form.List 实现二维数组结构
使用场景与实现效果需求的数据结构为可编辑的二维数组结构,在Form表单中提交数据到服务端,下面为数据结构的例子:[ [{ "text": "", "audioUrl": "", "emotion": "" }, { "text": "", "audioUrl": "", "emotion": "" }], [{ "text": "", "audioUrl": "", "emotion": "" }, { "text": "", "audioUr原创 2020-10-19 14:36:27 · 4897 阅读 · 1 评论 -
ant design 列表字段内容缩略,鼠标放上去显示全部
只需要在列中定义即可import { Tooltip } from 'antd';columns = [ { title: '识别结果', dataIndex: 'ocrTxt', ellipsis: true, render: value => <Tooltip title={value}> <div className="ellipsis" style={{原创 2020-08-06 11:42:21 · 3271 阅读 · 1 评论 -
react-player实现视频播放与自定义进度条
环境react.js ant design pro 4.0实现效果代码import React from 'react'import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Col ,Row,Button,Form,Input,Card,Slider,Select,message} from 'antd';import {CaretRightOutlined,PauseOutlined } f..原创 2020-07-27 21:25:38 · 6862 阅读 · 0 评论 -
Ant Design Mobile of React 创建报错:* name can no longer contain capital letters
1、创建使用dva/ create-react-app 新创建的空项目是报错先在D:\IDEAWorkplace\taoyunyouxuan 目录下手动创建文件夹YouXuanWeiXin然后从cmd命令:D:\IDEAWorkplace\taoyunyouxuan>create-react-app YouXuanWeiXin报错 Could not create a ...原创 2020-01-19 11:08:54 · 835 阅读 · 0 评论 -
react中写动态标签,render方法中如何使用if else 判断
在render()中循环数据,根据数据不同展示标签不同import React from 'react';const quanList=[ { id:1, buy_price:1,//购买券的价格 quan_price:30,//可抵扣价格 quanName:'仅限(学习机)商品使用', ...原创 2020-02-14 11:38:17 · 5384 阅读 · 0 评论 -
react 时间戳转时间格式
一、安装组件npm install --save moment二、引入组件importmomentfrom'moment';三、转换{moment(val.addtime).format("YYYY-MM-DDHH:mm:ss")}原创 2020-04-08 15:30:57 · 1818 阅读 · 0 评论 -
react 父组件数据更新 触发 子组件重新渲染
主要是在子组件中加上监听时间(子组件中添加一个生命周期函数)componentWillReceiveProps(nextProps){}例子:父组件import React from 'react';export default class Parent extends React.Component{ constructor(props){ ...原创 2020-04-11 10:46:06 · 9841 阅读 · 0 评论 -
Ant Design Pro 4.0 使用
一、table-list下载后自带的源码分析:<ProTable headerTitle="查询表格" actionRef={actionRef} rowKey="key" toolBarRender={(action, { selectedRows }) => [ <Button ic...原创 2020-04-16 09:21:58 · 1411 阅读 · 0 评论 -
react 中金额处理展示
展示金额使用react-format一、安装组件npm install --save react-format二、引用组件import{Money}from'react-format';三、使用组件<Moneylocale="zh-CN"currency="CNY">35.6</Money>currency 取值CNY 人...原创 2020-05-06 19:24:22 · 1653 阅读 · 1 评论 -
react crypto-js 实现前端加密与解密
一、安装 crypto-jsnpminstallcrypto-js二、react 前端加密import CryptoJS from "crypto-js"const key = CryptoJS.enc.Base64.parse( 'YCFIyMTG5NTYxYzlmZTA2OA==')var iv = CryptoJS.enc.Base64.parse('YCFyMTG5NTYxYzlmZTA2OA==')// 手机号加密result = CryptoJS.AES.en...原创 2020-06-01 11:02:46 · 5403 阅读 · 2 评论 -
antd pro 4.0 动态菜单
一、BasicLayout.jsx中获取服务端传来的菜单json格式的(需要符合config.js中的路由格式)/** * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout. * You can view component api by: * https://github.com/ant-design/ant-design-pro-layout */import ProLayout, { DefaultFoote原创 2020-06-03 20:10:26 · 5464 阅读 · 7 评论 -
ant design模态框中使用Select组件下拉选框不显示
问题描述:在Modal组件中使用select组件,结果无法显示出下拉选框解决方法:<Selectplaceholder="请选择词性"getPopupContainer={triggerNode=>triggerNode.parentNode}> <Select>...原创 2020-07-07 09:31:56 · 3188 阅读 · 0 评论