复杂页面 - 表格

本小节,我们需要实现异步载入数据并通过表格展现出来。该表格需要支持排序以及过滤功能。此处将会用到我们上一章学会的知识模拟异步数据,如果你尚未理解 model 相关内容,可以再过一遍以理解。

万事俱备,只欠东风。我们已经把需要开发的主要知识点都过了一遍,是时候将这些知识组合出一个带有些复杂逻辑的页面了。

相关代码:https://github.com/ant-design/react-tutorial

准备工作

添加页面组件

我们创建一个 src/page/list/index.js 作为新的页面组件。

import React from 'react';

class List extends React.Component {
  render() {
    return (
      <div>
        hello world
      </div>
    );
  }
}

export default List;

添加路由

我们在 config/config.js 中添加新的路由。

{ path: 'list', component: '../page/list' }

这个时候,在页面打开 http://localhost:8000/list 便可以看到你新建的页面了。

(你可以在侧边栏上加上链接来精益求精。当然,这可选的。不会影响我们接下来的内容。)

引入相关依赖

首先,编辑我们刚刚创建的 src/page/list/index.js 文件。将需要用到的依赖加入。

import { Table } from 'antd';
import { connect } from 'dva';

连接 dva

我们对 export 进行调整,将 dva 中的数据传入。

function mapStateToProps(state) {
  return {
    cardsList: state.cards.cardsList,
    cardsLoading: state.loading.effects['cards/queryList'],
  };
}

export default connect(mapStateToProps)(List);

其中当用户 dispatch 对应 effect 时,dva 会自动注入对应 effect 的 loading 状态。
因而我们可以很方便的将 state.loading.effects 中的状态传入。
(对应 card modal 代码请参阅 src/modal/cards.js 文件。)

获取数据

添加 componentDidMount 事件,使得我们可以在组件加载时触发异步请求。

componentDidMount() {
  this.props.dispatch({
    type: 'cards/queryList',
  });
}

当我们调用 connect 后,props 会传入 dispatch 方法供用户触发 Action。

展示表格

接着,我们定义表格所需要的列。

class List extends React.Component {
  columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '链接',
      dataIndex: 'url',
    },
  ];
  
  // ...
}

修改 render 方法展示出 Table。

render() {
  const { cardsList, cardsLoading } = this.props;

  return (
    <div>
      <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id" />
    </div>
  );
}

这时,刷新页面就可以看到效果了。

添加链接

我们在表格中最后一列显示的是一个超链接文本,这并不太方便。对其做些修改,使得用户可以直接点击超链接打开页面。

对 columns 中 url 列进行修改添加 render 方法。

{
title: '链接',
dataIndex: 'url',
render: value => {value},
},

一个简单的表格便完成了,下一节我们将添加一个表单用于创建新的数据到表格中。

相关文章

感觉本篇文章不错,对你有收获?

¥我要小额赞助,鼓励作者写出更好的教程
80 160 120

作者:

  • 出处: https://www.mi360.cn/articles/170
  • 本文版权归作者,欢迎转载,但未经作者同意必须保留 此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

评论区

最新评论

扫码关注