开发体验 —— 最简 Table 实现

这一章，我们需要利用上一章创建的 DataSet 结合 Table 组件来写一个简单的 Table 展示页面。首先看一看我们需要生成的 Table：

代码实现

在我们使用 cra 创建的 React APP 中，添加一下代码：

import './App.css';
import React, { useMemo } from 'react';
import { DataSet, Table } from 'choerodon-ui/pro';
const App = () => {
  // 使用上章 DS 配置，new DS 实例
  const tableDS = useMemo(()=> {
    return new DataSet(...);
  }, []）;
  // 表格列配置
  const columns = useMemo(()=>{
    return [
      { name: 'name' },
      { name: 'sex' },
      { name: 'code' },
      { name: 'active' },
    ];
  }, []);
  return (
    <div style={{ width: 1200, padding: 100 }}>
      <h1>C7N Pro Table</h1>
      <Table
        dataSet={tableDS}
        columns={columns}
      />
    </div>
  );
};
export default App;

代码分析

实现步骤：

使用上一章配置信息，创建 DataSet 数据源实例
定义表格列配置
1. 返回 columns 数组
2. 对象 name 关联 DataSet 中需要展示的字段 name
使用 Table 组件
1. 关联 DS 实例对象 tableDS
2. 设置 columns

查看浏览器，简单几行代码，我们就完成一个列表界面的实现了。

尝试在 columns 对象上加入 editor: true 试试。

再次查看 Table, 点击单元格，你会发现 Table 具备了行内编辑的功能。

一个属性就实现了 Table 行内编辑。如此高效，其实是因为组件结合 DataSet 帮助我们封装处理了大量标准逻辑。