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

Z时代
2024-01-10
分类：综合

react

七、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;