1.在用到antd里面的tree/treeSelect组件的时候，不能将带有tree的子组件放在父组件里面写，不然会出现点击tree组件，子组件重新渲染的问题（刷新/闪动），解决办法 子组件放在父组件外面，通过传值的方法实现，如果子组件中需要控制模态框=> 父组件 <a onClick={() => handleRoleModalVisible(
1. antd中<Row>里面的<Col>自动换行的办法。 方法一：在需要换行的地方，添加一个空的<Col>标签。 如：<Col span={24}></Col> 方法二：把需要进行换行的内容从From表单中取出来，用<Space>标签包裹，可实现自动换行。
model组件，因为在model中使用Form组件会导致动态删除行的时候一直是从后向前删除，所以这边用的是纯div来实现，通过变量danList来遍历里面的键实现动态的增加删除行 <Modal title={`${Object.keys(record).length > 0 ? '编辑' : '新增'}应用`} visible={m
使用子表格继续展示父级表格的数据： 、、子级数据 const menu = ( <Menu> <Menu.Item>Action 1</Menu.Item> <Menu.Item>Action 2</Menu.Item> </Menu> ); const expandedRowRender = (columnsa) => { console.log(columnsa) c
最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。 组件源码见另一篇博客， 用到的技术栈：VUE3、SCSS 用过antd-vue的都应该知道主要的传参是两个：columns和dataSource，分别对应表头信息和表格的数据信息。 1
废话不多说，上代码 // DOM <DatePicker style={{ width: '100%' }} disabledDate={disableDateOfMonth} picker="month" /> // 方法 // 不可用逻辑校验 const disableDateOfMonth = (current) => { return !( // 判断是否有值 current // 判断当前
见贤思齐焉，见不贤内自省 建立.js组件，在父组件中引入，传入自定义属性 import React from 'react'; import { Select } from 'antd'; import 'antd/dist/antd.css'; import '../styles/select.less'; const {Option} = Select; class MSelect extends React.Pure
react结合ant design做图片批量上传，使用的是ant design的Upload组件。 操作：点击上传图片按钮，批量选中图片，确认上传。 这个时候，antd的处理是，依次上传图片，一张图片调一次接口，选中8张图片，就会调用8次文件上传的接口，现在由于上传调用接口次数较多，于是准备改造成批量选中图片只调
react脚手架 + antd的craco.config.js配置 拉取脚手架执行以下命令 标题安装antd 修改 src/App.js，引入 antd 的按钮组件 修改 src/App.css，在文件顶部引入 antd/dist/antd.css 高级配置 安装 craco 并修改 package.json 里的 scripts 属性 然后在项目根目录创建一个 craco.config
import React, { Component } from 'react' import { Table } from 'antd'; export default class index extends Component { render() { const dataSource = [ ["微软", 'gh2', 3, 4], ['
首先，antd EditableProTable 组件是在 table组件的基础上又封装了一层，可以实现行更新，删除，增加。只需动动手指，简单配置一下即可。 先下载 EditableProTable 组件的依赖 cnpm install --save @ant-design/pro-table; 引入 import { EditableProTable } from '@ant-design/pro-ta
1、<a-table></a-table>标签中添加属性 :pagination="pagination" 2、data中设置pagination pagination: { current: 1, pageSize: 10, showSizeChanger: true, total: this.total, pageSizeOptions: ['5', &#
时间选择器 DatePicker 前言 最近做了需要用到时间选择器的项目，用到了DatePicker，特此来记录下 首先先贴出官网连接： ant Mobile:https://mobile.ant.design/components/picker#datepicker antd:https://ant-design.gitee.io/components/date-picker-cn/#header 一、antMobile版本
介绍 本文基于React+antd，给大家演示一个完整的全屏demo。 起因是开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能也会需要，便研究并记录之。 其实我觉得也没有很小（orz） 全屏 大家应该都在web页面里面见过全屏按钮，点击它以后页面
1. 弹窗销毁后再打开，原来的值仍存在，如何销毁弹窗内容？ 加destroyOnClose 属性，关闭时销毁子元素。再次打开内容就清空了~ <Modal title="新增对账流水" visible={visible} onOk={() => { formRef.current.handleSubmit(); }} onCancel={
React使用antd对于复杂数据类型表的渲染 数据 const table = [ { firstType: '电器', results: [ { secondType: '电视', list: [ { name: '小米', number:
问题：tabs绑定v-model / activeKey无效；无法动态设置选中的tab页 问题代码： <a-tabs v-model="activeKey" tab-position="left"> <a-tab-pane v-for="(type,index) in item.checkApplyTypes" :key="index" :tab="type.checkTypeName&q
环境配置 安装脚手架：npm install create-react-app 安装yarn：brew install yarn 创建项目：create-react-app antd-demo 切换路径：cd antd-demo 安装路由：yarn add react-router-dom 安装axios：yarn add axios 安装antd：yarn add antd 启动项目：yarn start
nuxt将全局组件以及方法等挂载同意放在了plugins中， 以文件作为区分： 例如，想要在此项目中全局挂载antd，那我需要在plugins下新建一个js文件，文件名随意，暂且叫antd-ui.js吧，里面的内容为： import Vue from 'vue'; import Antd from 'ant-design-vue/lib'; Vue.use(Antd); 然后需要
antd表格拖拽 组件DragSortableTable使用 组件DragSortableTable 支持合并单元格拖拽 import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import HTML5Ba
problem 步骤： 点击按钮，调用后端接口 设置 okLoading=true； 按钮的 disabled和loading都绑定到 okloading变量； 调用结束之后 设置okloading=false; 问题： 点击结束之后，按钮是灰色(点击中的样式)，没有恢复回来 reason antd-mobile组件本身问题 Google issues都没有人遇到这个问题
在使用antd中的Input组件时，点击修改后，再点击新增，input组件的默认值不变。找了很久，才知道这是用于input组件的复用导致的。 1.问题 当然，如果你将input中的值保存在函数组件的useState或者类组件的state中，应该不会出现这些问题。不过那样每次输入时会频繁render。不太推荐
Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据 2.H5页面唤起指定app或跳转到应用市场 3.使用vue-i18n切换多语言
示例 你想要的效果按下面示例仿写即可，具体使用教程晚点会出 示例一： <ProFormText name={['table_info', 'lifetime_min']} label='刷新频率' labelCol={{ span: 8, offset: 2 }} wrapperCol={{ span: 14, offset: 0 }} rules={[{ required: true }, { pattern: /^
