Ant Design
waillyer
码云地址:https://gitee.com/waillyer
展开
-
antd选择日期自定义组件
组件这里写目录标题组件index.jsDateInfoChange.jsxDatePageChange.jsx使用组件index.jsimport React from 'react';import { Radio } from 'antd';import 'moment/locale/zh-cn';import moment from 'moment';import dayjs from 'dayjs';export { default as DatePageChange } fro.原创 2022-01-08 12:09:56 · 1153 阅读 · 0 评论 -
antd Upload 自定义上传
需求由于使用antd 上传图片,在某些情况下,例如token 失效,导致上传图片错误,但是antd 组件始终会走onChange 事件导致上传路径为空情况解决办法使用自定义上传 // 自定义上传图片 const customRequest = params => { const { file, onSuccess, onError } = params; const formData = new FormData(); formData原创 2021-12-13 16:35:39 · 5017 阅读 · 0 评论 -
antd table无内容时修改默认显示
<Table columns={columns} dataSource={dataSource} pagination={false} locale={{ emptyText: '暂无数据' }} />原创 2021-11-26 16:30:23 · 3607 阅读 · 0 评论 -
react 拷贝上传文件
关键部分 const haoroomsbox = document.getElementById('ant-upload-drag-area-id'); haoroomsbox.addEventListener('paste', event => { const data = event.clipboardData || window.clipboardData; const items = data.items;原创 2021-10-22 17:29:47 · 366 阅读 · 0 评论 -
antd表格拖拽
antd表格拖拽组件DragSortableTable使用组件DragSortableTable支持合并单元格拖拽import React, { useState, useEffect } from 'react';import { Table } from 'antd';import { DndProvider, DragSource, DropTarget } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-backend原创 2021-09-29 17:24:23 · 2635 阅读 · 2 评论 -
antd4 from拆分
期望一个新增页面,由多个表单构成,按钮提交统一校验思路 需要把各个form实例保存下来,按钮提交时统一触发校验父组件<div className={styles.container}> <Form.Provider onFormFinish={name => { if (name === 'form1') { .原创 2021-09-10 14:34:21 · 455 阅读 · 0 评论 -
时间格式问题
moment.js的使用方法和日期格式化介绍import moment from 'moment'; start_date: moment().date(1), end_date: moment(), // subtract() 时间减 // start_dt_week: moment().subtract(4, 'weeks'),//当前时间的前4个星期时间 start_dt_week: moment().startOf('month'),//当前月份开始第一天原创 2021-07-27 16:54:53 · 105 阅读 · 0 评论 -
antd 表格合计栏
import React, { useEffect, useState } from 'react';import { PageContainer } from '@ant-design/pro-layout';import { Form, Input, Button, Card, Table } from 'antd';/** * 单元格合并处理 * @param text 当前单元格的值 * @param data 当前分页所有数据 * @param key 当前列的dataIn.原创 2021-07-24 11:09:49 · 4491 阅读 · 2 评论 -
antd下来组件支持多条件检索
直接上代码import React, { useEffect, useState } from 'react';import { Select } from 'antd';import Resource from '@/services/Resource';const Option = Select.Option;export default props => { const [creatorList, setCreatorList] = useState([]); us原创 2021-07-01 17:41:03 · 429 阅读 · 0 评论 -
antd table表格可展开单元格按需展开
<Table {...tableProps} scroll={{ x: 1600, y: 420 }} columns={columns} dataSource={tableData} pagination={pagination} ...原创 2021-06-16 12:20:12 · 1710 阅读 · 0 评论 -
Ant Design 4表单
在antd 3 ,需要使用 Form.create 管理表单,相当于高级组件去 使用需要使用 <Form.Item> {getFieldDecorator('username', { rules: [{ required: true, message: 'Please input your username!' }], })( <Input prefix={<Ic原创 2021-05-24 22:06:42 · 209 阅读 · 0 评论 -
antd相关
一.table表格超出省略显示Tooltip 显示 { title: '备注', dataIndex: 'remark', key: 'remark', width: 160, // ellipsis: true,也可以直接使用这属性就可以 render: text => { return (原创 2021-05-21 16:06:42 · 120 阅读 · 0 评论 -
antd 的 RangePicker 中日期范围
<FormItem label="登记时间" className="four-word-padding"> {getFieldDecorator('dates', { initialValue: dates, })(<RangePicker disabledDate={disabledDate} format="YYYY-MM-DD" />)} </FormItem> const disabledDate = curren原创 2021-05-17 12:49:05 · 711 阅读 · 0 评论 -
antd 自定义校验
<FormItem label="联系电话"> {getFieldDecorator('contact_phone', { initialValue: contact_phone, rules: [ { required: true, message: ' ', },原创 2021-05-17 12:20:03 · 89 阅读 · 0 评论 -
如何在Vue中使用Echarts可视化库
介绍Echarts:百度开发的数据可视化库,国内图表库的 “领军人物”官网:https://echarts.apache.org/zh/index.html安装1、使用npm安装Echarts:npm install echarts --save2、使用yarn安装Echarts:yarn add echarts --save引入//main.jsimport * as Echarts from 'echarts';Vue.prototype.$Echarts = Echarts原创 2021-02-22 09:38:58 · 1892 阅读 · 0 评论 -
AntDesign表格中下拉菜单
表格更多操作下拉菜单下拉点击传入key和对应行数据即可<span slot="action" slot-scope="text, record"> <a>Invite 一 {{ record.name }}</a> <a-divider type="vertical"/> <a-popconfirm v-if="data.length" title="Sure to delete?"原创 2021-02-21 16:24:04 · 4509 阅读 · 0 评论 -
基于AntDesign组件的Vue项目
Ant Design of VueAnt Design of Vue这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。官网创建项目vue create my-project请参照上一篇文章vue-cli4.4.1+elementUI搭建后台系统原创 2021-02-20 11:54:59 · 1071 阅读 · 0 评论