2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用

一、今日主要任务

悉尼小程序后台管理开发:

景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称、分类过滤出对应的景点。

二、难点

1. 项目技术选取:

  ant design、react、es6;

2. 在此之前,只看过一点点 es6 的语法,未实操;react 也只是看过语法,未实操;ant design 是个什么鬼,第一次听说。

3. 所遇的主要问题:

(1)ant design 中 table 组件的使用:

  引入 Table、Buttton、Col、Row、Select 组件 => import {Table, Button, Col, Row, Select} from ‘antd‘;

  申明 Select 下的 Option => const Option = Select.Option, 使用 => <Select><Option></Option></Select>;

  将 Button 组件化 => const ButtonGroup = Button.Group, 使用 => <ButtonGroup><Button></Button></ButtonGroup>;

  创建Table =>

    <Table rowKey={(record) => record.id} columns={columns} dataSource={sites} pagination={false} bordered size="middle" />

    record 是从 dataSources 里面获取的每行数据,在创建行的时候,ant design 会自动为每行创建一个唯一的 id;

  在 columns 中创建列,如

  const columns = [

    {

      title: ‘中文名称‘, // 列的名称

      dataIndex: ‘cnTitle‘, // 列的数据,值从 dataSource 的对象中取,要求属性名是相同的才能取到正确的值

      key: ‘cntitle‘,

    },

    {     

      title: ‘英文名称‘,

      dataIndex: ‘enTitle‘,

      key: ‘entitle‘,

    }

  ]

(2)报错信息,500 服务器错误,401 未授权,(看一下application里的user信息是否过期),network中的请求信息,请求结果;

  network - Headers:查看请求 url,请求 method,以及请求 status;

  network - Request Payload:查看该请求返回的字段及其值;

时间: 2024-10-12 11:47:13

2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用的相关文章

2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用

一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: <Upload action="/hserve/v2/file/upload/" // 必选参数,上传的地址: listType="picture" // 上传列表的内建样式,这个不是很明白 text.picture.picture-card 之间的区别,默认值为 te

ant design table学习--引入第一个table组件

1.安装create-react-app.创建第一个项目my-app.$ npm install create-react-app$create-react-app my-app$ cd my-app2.安装antd,reqwest..$ npm install reqwest --save-dev.$ npm install reqwest --save-dev3.修改APP.js文件如下.(一定要引入import 'antd/dist/antd.css';不然table显示不了)import

2017.11.30 React基础语法之一组件

1.推荐一个React学习中文网站:http://www.css88.com/react/ 2.使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件.使用React.createClass用于生成一个组件 var MyComponent=React.createClass({ render: function() { return <h1>Hello world!</h1>; } }); ReactDOM.render( <MyC

ant design的form组件使用总结

1.创建 @Form.create()//写在class外面 然后就能通过this.props.from来操作 2.form内的值的操作 (1)查 this.props.form.validateFields((err, values) => { console.log(values)}); (2)增,改 this.props.form.setFieldsValue({id:1}); 注意:必须先有dom,比如: <Form onSubmit={this.handleSubmit}> &

自写一个漂亮的ant design form提交标签

在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: 1 import React,{Fragment} from 'react'; 2 import { Tag,Icon,Input } from 'antd'; 3 export interface TagDataType{ 4 data:string, 5 color:string, 6 key:string 7 } 8 export interface P

elementUi、iview、ant Design源码button结构篇

在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功能那些会 用到哪些会相对比较好. 我们先来看这三个UI的button对外开放的功能结构: elementUI button: iview button: ant Design button: 可以看出iview和ant Desgin的button的功能很像,而element的button的功能少了个

十九、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 '

react + es6 +ant design 实现一个简单demo表格添加删除

首先介绍一下整体的样式及实现的效果 如图所示,点击添加按钮会接着后面新增一行,点击操作下的删除图标将会删掉一行,如果删掉序号为1的行,第二行会自动变成第一行序号也会随之改变. ps:数据交互均还未实现. 介绍完毕:下面正题! 1.布局 import React, { Component, PropTypes } from 'react';import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from 'ant

使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

 create-react-app是来自于Facebook出品的零配置命令行工具,能够帮你自动创建基于Webpack+ES6的最简易的React项目模板 1:首先在webstorm中新建一个项目 2:倘若不是最新版本的npm   ,   安装最新版本npm     npm install npm @latest 3: 安装项目中常用的相关的配置 yarn add react-redux redux redux-thunk react-router-dom thunk [email protect