基本业务操作的相关组件渲染---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列

查询操作实现效果

拉取项目 luwei.web.study-ant-design-pro, 切换至 query 分支,可看到查询操作实现效果

如图所示

image

深入学习和了解组件:

  • 查询表单 [Form]()
  • 查询结果 [Table]()

新增操作实现效果

拉取项目 luwei.web.study-ant-design-pro, 切换至 add 分支,可看到新增操作实现效果

深入学习和了解组件:

  • 新增弹出框 [Modal]()
  • 新增表单 [Form]()

删除操作实现效果

拉取项目 luwei.web.study-ant-design-pro, 切换至 del 分支,可看到删除操作实现效果

如图所示

image

深入学习和了解组件:

  • 删除提示框 [Popconfirm]()

作者简介:李尧晖,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战: [email protected]
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号外包,高质量的钉钉开发,专业的企业微信建设,东莞微信小程序开发,广州小游戏制作,广东H5建设

原文地址:https://www.cnblogs.com/luwei-web/p/10209342.html

时间: 2024-07-29 14:23:48

基本业务操作的相关组件渲染---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列的相关文章

git-拉取项目---基于Ant-Design-Pro-2-0-的CMS管理后台入门系列

git 拉取项目CMS管理后台项目 github 项目地址:luwei.web.study-ant-design-pro 企业内部项目地址:study.ant-design-pro 注:github 上的项目暂不支持后台数据渲染对接的步骤,仅使用静态数据展示. 项目下载方式: 使用 git clone 拉取 download zip image 在此不做过多解释,若不了解 git 基本操作命令,请移步至 廖雪峰 - Git教程 文件简介 ├── config                   

Ant Design Pro 学习三 新建组件

在 src/components 下新建一个以组件名命名的文件夹,注意首字母大写 在使用组件时,默认会在 index.js 中寻找 export 的对象,如果你的组件比较复杂,可以分为多个文件,最后在 index.js 中统一 export,就像这样: // MainComponent.js export default ({ ... }) => (...); // SubComponent1.js export default ({ ... }) => (...); // SubCompon

基于ant design form的二次封装

// standardForm.js import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Form, Input, Row, Col, Button } from 'antd'; const FormItem = Form.Item; // 默认的layout export const defaultLabelColSpan = 8; const defaultFor

基于H.ui.Admin UI模板的网站管理后台

最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了,但功能繁杂,选择起来很费劲,要花很多时间拆解. 所以,考虑到是外包项目,速度和效率第一,越快上手越好. 现在把几个效果图贴出来,与大家分享,欢迎指正:

如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

引言: create-react-app是Facebook发布的一款全局的命令行工具用来创建一个新的项目. 通常我们开始做一个react web或者 app 项目的时候,都会自己利用 npm 或者 yarn 安装项目所需要的一些依赖,再写 webpack.config.js ,一系列复杂的配置,搭建好开发环境后写src源代码. 现在,如果你想要搭建一个完整的 react 项目环境,已经不需要自己动手布置许许多多的东西,利用 create-react-app 工具,就能轻松帮你配置好一个 reac

十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用Antd 1.在项目根目录安装antd[每个项目都安装一次]: npm install antd --save / yarn add antd / cnpm install antd --save 2.在您的react项目的css文件中引入Antd的css[会引入所有css样式]: @import '

【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件(三)

RAC 工作原理和相关组件(三) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体系的总结,一则进行回顾复习,另则便于查询使用.本图文文档亦源于此.阅读Oracle RAC安装与使用教程前,笔者先对这篇文章整体构思和形成进行梳理.由于阅读者知识储备层次不同,我将从Oracle RAC安装前的准备与规划开始进行整体介绍安装部署Oracle RAC.始于唐博士指导,对数据库集群进行配置安装,前

Element Tabs 组件中使用 ve-histogram组件渲染不出来

Element Tabs 组件中使用 ve-histogram组件渲染不出来 发现问题提了issue,饿了么前端"西瓜"同学很快做了回复,饿了么大前端团队有沉淀很专业,赞. tip: GitHub 的用法与礼仪 心得:使用开源库发现问题时,先自己探索尝试各种情况,并留下痕迹,然后可以和相关方讨论.提issue eg,发现tab中嵌柱状图不能正常渲染(VIEW) , HTML(不能正常渲染的:width为0) HTML(能正常渲染的:width不为0) 据经验地图.图表等基于canvas

svn常规操作与相关知识

Svn常规操作与相关知识 一.何谓版本控制 它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编辑错误之后还可以回溯到以前的版本 二.可供我们选择的版本控制系统 1.VCS  (本地版本控制) 2.VSS.CVS(集中版本控制) 3.ClearCase.SVN.Perforce.TFS(集中版本控制) 4.Mercurial(水银/水星).Git(分布式版本控制) 差异: 1.Git和其他版本控制系统的主要