React+AntDesign入門：七、表格Table的使用和數據動態渲染

七、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獲取的