跳到主要内容

单元格

TableCell是表的字段呈现组件。它用于渲染不同类型的字段

何时使用

  • 当你需要使用Gitee Team的某些字段组件功能时
  • 当需要渲染业务表时

属性

属性属性类型属性说明是否必填
cellDataCellData单元格数据true
columnColumn单元格配置true
rowDataRowData整行的数据 truefalse
readComponentsRecord<string,React.FC>只读组件,可以通过getAllReadComponents获取true
editComponentsRecord<string,React.FC>编辑组件,可以通过 getStandardEditComponents获取false
handleChangefunctionvalue更新回调false

interface Column {
cellType?: string; // 单元格类型
property?: Property; // 单元格属性,根据后端返回的column中的property
data?: any; // 列的选项数据
}

类型

  • Actors: 用户角色
  • Assignee: 负责人
  • Checkbox: 复选框
  • CreatedAt: 创建时间
  • CreatedBy: 创建人
  • DataQuote: 数据引用
  • Date: 日期
  • Dropdown: 下拉选项
  • Editor: 富文本
  • File: 文件
  • Formula: 公式类型字段
  • ItemType: 事项类型
  • Key: matter key
  • LongText:多行文本
  • Name: 事项名称
  • Number:数字类型
  • Priority:优先级
  • Radio:单选框
  • Script: 脚本
  • Sprint: Iteration
  • Status: 状态
  • Tag: 标签
  • Team: 团队
  • Text: 文本
  • Tree: 树组件
  • UpdatedAt: 更新时间
  • UpdatedBy: 跟新人
  • User: 用户
  • UserGroup: 用户组
  • Version: 版本
  • Workspace: 空间

示例

import { Table, OverflowTooltip } from 'antd';
import { TableCell, getAllReadComponents } from '@giteeteam/apps-team-components';

const readComponents = getAllReadComponents();

const AgileBoardListPage = () => {
const columns = [
{
title: 'name',
dataIndex: 'name',
key: 'name',
width: '40%',
ellipsis: true,
render: text => (
<OverflowTooltip title={text} maxline={1}>
{text}
</OverflowTooltip>
),
},
{
title: 'Created By',
dataIndex: 'createdBy',
key: 'createdBy',
ellipsis: true,
render: (value, row) => (
<TableCell
rowData={row}
cellData={value}
column={column}
readComponents={readComponents}
/>
),
},
{
title: 'Workspace',
dataIndex: 'workspace',
key: 'workspace',
ellipsis: true,
render: (value, row) => (
<TableCell
rowData={row}
cellData={value}
column={column}
readComponents={readComponents}
/>
),
},
];

return (
<Table
rowKey="objectId"
columns={columns}
dataSource={[]}
/>
)
}