antd表格

import React from "react";
import {Card,Table} from "antd";
import axios from "axios";

export default class BasicTable extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            dataSource:""
        };
    }
    componentDidMount(){
        const  data=[{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },{
                            id:"1",
                            name:"xiaoming",
                            age:12,
                            address:"xihu",
                            other:"max",
                        },];
        axios.get("https://www.easy-mock.com/mock/5bb61edebaa7dc5e5e8d18d0/mockapi/table/basic").then(data=>{
            const data1=data.data;
            if(data1.code!=1){
                console.log(data1.result)
                this.setState({dataSource:data1.result})
            }

        })

       // this.setState({dataSource:data})
    }

    render(){
        const columns = [
                            {
                              title:"id",
                              dataIndex:"id",
                            },{
                                title:"名字",
                                dataIndex:"name",
                            },{
                                title:"年龄",
                                dataIndex:"age",
                            },{
                                title:"地址",
                                dataIndex:"address",
                            },{
                                title:"其他",
                                dataIndex:"other",
                            },
                ];


        return(<div>
            <Card>
                <Table
           columns={columns}
            dataSource={this.state.dataSource}
           bordered
           pagination={{"defaultPageSize":5}}
           size="small"
                />
            </Card>
        </div>)
    }
}

table的几个属性：感觉跟ext的差不多

columns  列 的名字 表头 有个dataindex的属性 代表数据字段映射，title是标题

dataSource 的属性 是数据源 一般默认为数组 对象

size是展示风格

bordered是表格是否显示

pagination 代表是分页的配置项 ，是个对象。如果传入false就隐藏了

如果需要根据后端传值去渲染； 就像ext那样 写render函数就可以了  有个写法不错 ：假设条件很多那么这样写会比较好

render(v){
  
    const config = {
       1:"a",
       2:"b",
       3:"c",...

    }

    return config[v];
}

render里还可以去渲染一些自己的小图标 使用antd的Badge ；

 

 render(){
      return <Badge status="error" text="警告"   />
                }

如果需要操作（增删改查）  那么这么渲染 

这边说下删除  

 render:(text,index)=>{
                     return <a  onClick={this.deleteItem.bind(this,index.key)}>delete</a>
                }

注意给render函数一个箭头函数绑定到自己不然就绑定到table了； 

在函数里进行业务逻辑操作 如 删除 二次确认 以及 删除完成以后刷新页面等等 ；

 

 

这边最左边的 选择框分为两种（一般也是用 checkbox，不使用radio）

两个属性 

rowSelection   //配置属性

<table  rowSelection={rowSelection} >


//在外面定义常量配置
 const rowSelection= {
            selectedRowKeys:this.state.select,
            type: "checkbox",
            onChange: this.rowSelectionHandle.bind(this)
        };


// onchange事件和state绑定


 rowSelectionHandle(selectedRowKeys, selectedRows){

        this.setState({select:selectedRowKeys});

     //  setTimeout(()=>{console.log(this.state.select)},0)

    }

//state
this.state={
            dataSource:[],
            select:[]
        };

  还有要实现点击行内 选中 的功能 ；

  

<table
rowSelection={rowSelection}

onRow={(v)=>{
              return { onClick: () => {

                  const arr= this.state.select;
                   arr.push(v.key);

                  this.setState({select:arr})


                  },       // 点击行

          onMouseEnter: () => {},  // 鼠标移入行
                   }
           }}

/>

 

如果需要内部 滚动的话 ；分为以下两种情况

y轴： 设置属性 

scroll={{y:1200}}

并且columns每一项 都有width属性 才能对其 

x轴   

scroll={{x:1200}}  x的值是所有columns的width的属性值 ；但是这样导致的是全局滚动 

如果某一项column不想不想滚动 

在其属性上添加fixed属性 ： 固定到“left” 还是“right‘  看你需要 

排序  ：

这个功能需要在 3个位置改动 

// 1.table
onChange={(a,b,c)=>this.handleSort.bind(this,c.order)} 
//拿到c 就是order 排序的值 去给state同步； 注意这边的 change事件需要手动调用；


//2 ， column

  sorter:(a,b)=>{
              return a.age-b.age;
                               },

      sortOrder:this.state.sortOrder,

这边就是 和js的排序一样  ，同时吧state的值绑定 


// 3 设置state
 handleSort(c){
       this.setState({sortOrder:c})


    }