import React from 'react';
import '../../css/uicss/UI.css';
import 'antd/lib/style/index.less';
import 'antd/lib/table/style/index.less';
import 'antd/dist/antd.css';
import { Table } from 'antd';

export default class Tableantd extends React.Component {
    constructor(props) {
      super(props);
      this.showCurRowMessage = this.showCurRowMessage.bind(this);
  }
  componentDidMount() {
    
  }
showCurRowMessage(record){
    alert(11);
    alert("key:"+record.key + " name:"+record.name + " age:" + record.age + " address:" + record.address + " description:" + record.description);
  }
  //展示当前行信息
 
    render(){
        
        let self = this;
        console.log(self);
        const columns = [
      { title: "姓名", dataIndex: "name", key: "name" },
      { title: "年龄", dataIndex: "age", key: "age", render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},
      { title: "住址", dataIndex: "address", key: "address" },
      { title: "描述", dataIndex: "description", key: "description" },
      { title: "操作", dataIndex: "", key: "operation", render: function(text, record, index) {
          //alert(text.operation + " " + record.operation)
          return <a href="#" name="delete" onClick={function() { self.showCurRowMessage(record)} } >信息</a>; } },
      //精简写法
      //{ title: "操作", dataIndex: "", key: "operation", render: (text, record, index) => <a href="#" name="delete" onClick={() => self.showCurRowMessage(record)}>信息</a> },
    ];
     const data = [
        { key: 1, name: "hyw", age: 32, address: "西湖区湖底公园1号", description: "我是hyw,今年32岁,住在西湖区湖底公园1号。", children:[
          { key: 1.1, name: "fas", age: 32, address: "西湖区湖底公园1号", description: "我是fas,今年32岁,住在西湖区湖底公园1号。" },
          { key: 1.2, name: "wyz", age: 42, address: "西湖区湖底公园2号", description: "我是wyz,今年42岁,住在西湖区湖底公园2号。" },
          { key: 1.3, name: "ldz", age: 32, address: "西湖区湖底公园3号", description: "我是ldz,今年32岁,住在西湖区湖底公园3号。" },
        ]},
        { key: 2, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx,今年32岁,住在西湖区湖底公园1号。" },
        { key: 3, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk,今年42岁,住在西湖区湖底公园2号。" },
        { key: 4, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt,今年32岁,住在西湖区湖底公园3号。" },
        { key: 5, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx,今年32岁,住在西湖区湖底公园1号。" },
        { key: 6, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk,今年42岁,住在西湖区湖底公园2号。" },
        { key: 7, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt,今年32岁,住在西湖区湖底公园3号。" },
          { key: 8, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx,今年32岁,住在西湖区湖底公园1号。" },
        { key: 9, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk,今年42岁,住在西湖区湖底公园2号。" },
        { key: 10, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt,今年32岁,住在西湖区湖底公园3号。" },
          { key: 11, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx,今年32岁,住在西湖区湖底公园1号。" },
        { key: 12, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk,今年42岁,住在西湖区湖底公园2号。" },
        { key: 13, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt,今年32岁,住在西湖区湖底公园3号。" },
      ];

const rowSelection = {
      onChange(selectedRowKeys, selectedRows) {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
      },
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows, changeRows) {
        console.log(selected, selectedRows, changeRows);
      }
        }
        return(
         <Table columns={columns}
          rowSelection={rowSelection}
          dataSource={data}
          className="table"
        />
        );
    }
}

react引用ant的table组件的更多相关文章

  1. 封装react antd的表格table组件

    封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格,降低代码重复率,降低劳动时间,减少加班的可能. 本次组件的封装采用了函数式组件即无状 ...

  2. react中使用antd Table组件滚动加载数据的实现

    废话不多说,直接上代码.一目了然. import React, { Component } from "react"; import { Table } from "an ...

  3. React中使用Ant Table组件

    一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启 ...

  4. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  5. Ant Table组件

    http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件   v一.Ant Design of React http:/ ...

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

    一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点.   二.难点 1. 项目技术选取: ant design. ...

  7. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  8. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  9. 把iview中的table组件写成了一个公用组件,在另一个组件里去引用它的时候rander函数里的this指向不正确

    在vue项目里使用iview制作后台管理系统时,由于有多个页面都需要用到table组件,所以就把table写到了一个公共组件里,在其他页面去引用它,但是这时会发现一个问题,就是render函数里的th ...

随机推荐

  1. 在计算机 . 上没有找到服务 WAS

    添加的程序不全导致或者服务没开启导致 重新打开IIS,刷新一下 发现已经可以了,不再标红报错了

  2. MVC4做网站后台:用户管理 ——用户组 1、添加用户组

    打开控制器UserGroupController 添加Add action /// <summary> /// 添加用户组 /// </summary> /// <ret ...

  3. MySQL 外键

    在MySQL中 (1)MySQL 数据表主要支持六种类型 ,分别是:BDB.HEAP.ISAM.MERGE.MYISAM.InnoBDB.这六种又分为两类,一类是”事务安全型”(transaction ...

  4. dev c++ Boost库的安装

    dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...

  5. 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  6. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  7. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  8. Lua 性能相关笔记

    1.创建一个闭合函数要比创建一个table更廉价,访问非局部的变量也比table字段更快. 2.访问局部变量要比全局变量更快,尽可能的使用局部变量,可以避免无用的名称引入全局环境. 3.do-end语 ...

  9. [OpenCV] Background subtraction

    不错的草稿.但进一步处理是必然的,也是难点所在. http://docs.opencv.org/master/d1/dc5/tutorial_background_subtraction.html#g ...

  10. Struts2学习笔记--使用Response下载文件和Struts2的StreamResult文件下载

    使用Response下载文件,servlet中的文件下载是通过流来实现的   我在webRoot文件夹下新建了一个文件夹from,里边放了一张图片,这里就以下载这张图片为例:download.jsp很 ...