React+AntDesign入门：七、表格Table的使用和数据动态渲染

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29668759/article/details/88746428

七、Ant Design 表格Table的使用

1.先实现一个简单的表格

代码：

import React from 'react'
import {Card, Table} from 'antd'

class BasicTable extends React.Component{

  constructor(props){
    super(props);

    this.state = {

    }
  }

  componentDidMount() {
    //构造一些初始数据
    const data = [
      {
        id: 1,
        name: '小明',
        sex: '男',
        age: 12,
        state: 'Y'
      },
      {
        id: 2,
        name: '小王',
        sex: '女',
        age: 12,
        state: 'Y'
      },
      {
        id: 3,
        name: '小花',
        sex: '女',
        age: 12,
        state: 'Y'
      }
    ];

    this.setState({
      dataSource : data
    })
  }


  render() {

    //定义表头，一般放在render()中
    const columns = [
      {
        title:'编号',         //列名称
        dataIndex:'id'      //数据源的字段名
      },
      {
        title:'姓名',
        dataIndex:'name'
      },
      {
        title:'性别',
        dataIndex:'sex'
      },
      {
        title:'年龄',
        dataIndex:'age'
      },
      {
        title:'启用状态',
        dataIndex:'state'
      }
    ]


    return (
      <div>
        <Card title={"基础表格"}>
          {/*columns:指定表头
          dataSource:指定数据源
          borderd:加边框*/}
          <Table columns={columns} dataSource={this.state.dataSource} bordered>
          </Table>
        </Card>
      </div>
    )
  }

}

export default BasicTable;

效果：

2.Table动态数据渲染

主要涉及概念：

• Mock数据
• ant design提供给我们封装后的request工具。

(1)创建Mock数据

使用easyMock创建数据：https://www.easy-mock.com

注意，这里result内的数据并不符合mock.js的规范。

(2)学习dva

要先学会dva的使用。

https://www.yuque.com/ant-design/course/abl3ad

(3)配置代理

修改config/config.js

(4)Model代码

/src/models/ReactAntd04_Table/basicTableModel.js代码

import request from '../../utils/request';

export default {
  namespace:'basicTableModel',

  state:{
    data:[],
  },

  effects:{
    *queryStudentInfo(_, sagaEffects){
      const {call, put} = sagaEffects;

      const queryDatas = yield call(request,"/reactantd/table/studentinfo/query");

      console.log(queryDatas);

      yield put({type:'addNewStudentInfo',
        payload:queryDatas});
    }
  },

  reducers:{
    addNewStudentInfo(state, {payload: newInfo}){  //新增学生信息
      //const result = newInfo.rows;
      const result = newInfo.result;

      const newData = state.data.concat(result);
      console.log(newData);
      return{
        data: newData
      }
    }

  },

};

(5)页面代码

import React from 'react'
import {Card, Table} from 'antd'
import {connect} from 'dva';

const namespace = 'basicTableModel';

/** 将dva model中的state通过组件的props注入给组件 **/
const mapStateToProps = (state) => {
  const studentInfoList = state[namespace].data;
  return{
    studentInfoList,
  }
}

/** 将dva model中的reducers中的方法通过组件的props注入给组件 **/
const mapDispatchToProps = (dispatch) => {
  return{
    onDidMount: ()=>{
      dispatch({
        type: `${namespace}/queryStudentInfo`,
      });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps) //连接dva和react,获取model中的数据,将dva model中的state通过组件的props注入给组件
class BasicTable extends React.Component{

  constructor(props){
    super(props);

    this.state = {
      studentInfo : []  //动态数据的表格内的数据
    }
  }

  componentDidMount() {
    //构造一些初始数据
    const data = [
      { id: 1, name: '小明', sex: '男', age: 12, state: 'Y' },
      { id: 2, name: '小王', sex: '女', age: 12, state: 'Y' },
      { id: 3, name: '小花', sex: '女', age: 12, state: 'Y' }
    ];

    this.setState({
      dataSource : data
    })

    this.props.onDidMount();
  }


  render() {

    //定义表头，一般放在render()中
    const columns = [
      {
        title:'编号',         //列名称
        dataIndex:'id'      //数据源的字段名
      },
      {
        title:'姓名',
        dataIndex:'name'
      },
      {
        title:'性别',
        dataIndex:'sex'
      },
      {
        title:'年龄',
        dataIndex:'age'
      },
      {
        title:'启用状态',
        dataIndex:'state'
      }
    ]


    return (
      <div>
        <Card title={"基础表格"}>
          {/*columns:指定表头
          dataSource:指定数据源
          borderd:加边框*/}
          <Table columns={columns} dataSource={this.state.dataSource} bordered>
          </Table>
        </Card>

        <Card title={"动态数据的表格：Mock数据、Axios"}>
          {/*columns:指定表头
          dataSource:指定数据源
          borderd:加边框*/}
          <Table columns={columns} dataSource={this.props.studentInfoList} bordered rowKey={"id"}>
          </Table>
        </Card>


      </div>
    )
  }

}

export default BasicTable;

(6)效果

上面的表格的数据是个固定的，下面表格的数据是从easy mock获取的