分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:24责任编辑:白小东关键词:组件
一、今日主要任务
悉尼小程序后台管理开发:
景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称、分类过滤出对应的景点。
 
二、难点
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:查看该请求返回的字段及其值;
 

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

原文地址:http://www.cnblogs.com/lee-xiumei/p/7827544.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved