cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
453 lines (409 loc) • 65.8 kB
Markdown
## 简介
表格也可被视一类列表，表格有多种分类，常用于信息展示场景，由表头操作区、表格内容区、底部操作区3部分组成，通常表头操作区包括主行动、搜索、表格展示设置等功能，底部操作区则主要提供批量操作、翻页功能。
> 📢 注意: 如果是 `import { Table } from '@ali/xconsole/ui'`, 则可以使用更多高级表格的功能。更多高级功能参见 [增强表格 API](https://xconsole.aliyun-inc.com/nexconsole/component_web/wyqgmh)
> 📢 注意: 如果直接通过 `import { Table } from '@alicloud/console-components'` 引入的，则只能使用当前文档中的 API.
## 示例
### 基础形态
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';
const getDataSource = () => {
const result: any[] = [];
for (let i = 0; i < 5; i++) {
result.push({
id: 100306660940 + i,
status: i % 2 === 0 ? '运行中' : '停用',
type: '专用网络',
title: '可以通过 expandedRowRender 额外渲染行',
});
}
return result;
};
const render = () => {
return (
<Actions>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
</Actions>
);
};
export default () => {
const [dataSource, setDataSource] = useState(getDataSource());
const onFilter = (filterParams) => {
let ds = getDataSource();
Object.keys(filterParams).forEach((key) => {
const { selectedKeys } = filterParams[key];
if (selectedKeys.length) {
ds = ds.filter((record) => {
return selectedKeys.some((value) => {
return record[key].indexOf(value) > -1;
});
});
}
});
setDataSource(ds);
};
return (
<Table onFilter={onFilter} dataSource={dataSource}>
<Table.Column title="实例ID/名称" dataIndex="id" width={200} />
<Table.Column
filters={[
{
label: '运行中',
value: '运行中',
},
{
label: '停用',
value: '停用',
},
]}
title="状态"
dataIndex="status"
/>
<Table.Column title="网络类型" dataIndex="type" />
<Table.Column title="操作" cell={render} width={200} />
</Table>
);
};
export const meta = {
title: '默认表格',
describe: '',
};
```
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';
const getDataSource = () => {
const result: any[] = [];
for (let i = 0; i < 5; i++) {
result.push({
id: 100306660940 + i,
status: i % 2 === 0 ? '运行中' : '停用',
type: '专用网络',
title: '可以通过 expandedRowRender 额外渲染行',
});
}
return result;
};
const onChange = function (...args) {
console.log(...args);
};
const render = () => {
return (
<Actions>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
</Actions>
);
};
export default () => {
const [dataSource, setDataSource] = useState(getDataSource());
const onFilter = (filterParams) => {
let ds = getDataSource();
Object.keys(filterParams).forEach((key) => {
const { selectedKeys } = filterParams[key];
if (selectedKeys.length) {
ds = ds.filter((record) => {
return selectedKeys.some((value) => {
return record[key].indexOf(value) > -1;
});
});
}
});
setDataSource(ds);
};
return (
<Table
onFilter={onFilter}
dataSource={dataSource}
rowSelection={{
onChange,
mode: 'multiple',
}}
>
<Table.Column title="实例ID/名称" dataIndex="id" width={200} />
<Table.Column
filters={[
{
label: '运行中',
value: '运行中',
},
{
label: '停用',
value: '停用',
},
]}
title="状态"
dataIndex="status"
/>
<Table.Column title="网络类型" dataIndex="type" />
<Table.Column title="操作" cell={render} width={200} />
</Table>
);
};
export const meta = {
title: '默认多选表格',
describe: '',
};
```
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';
const getDataSource = () => {
const result: any[] = [];
for (let i = 0; i < 5; i++) {
result.push({
id: 100306660940 + i,
status: i % 2 === 0 ? '运行中' : '停用',
type: '专用网络',
title: '可以通过 expandedRowRender 额外渲染行',
});
}
return result;
};
const render = () => {
return (
<Actions>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
</Actions>
);
};
const expandedStyle = {
borderWidth: 0,
borderStyle: 'solid',
borderColor: '#e5e5e5',
padding: '16px',
background: '#ffffff',
};
const centerStyle = {
height: '128px',
borderRadius: '4px',
lineHeight: '128px',
background: '#f6f6f6',
textAlign: 'center',
} as const;
export default () => {
const [dataSource] = useState(getDataSource());
return (
<Table
dataSource={dataSource}
expandedRowRender={() => (
<div style={expandedStyle}>
<div style={centerStyle}>Content Placeholder</div>
</div>
)}
>
<Table.Column title="实例ID/名称" dataIndex="id" width={200} />
<Table.Column title="状态" dataIndex="status" />
<Table.Column title="网络类型" dataIndex="type" />
<Table.Column title="操作" cell={render} width={200} />
</Table>
);
};
export const meta = {
title: '可展开表格',
describe: '可以通过 isTree 渲染树状结构表格',
};
```
```tsx
import React from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';
const data = [
{
id: 1,
name: '实例名称',
status: '成功',
type: '专有网络',
children: [
{
id: 11,
name: '实例名称',
status: '成功',
type: '专有网络',
},
{
id: 12,
name: '实例名称',
status: '成功',
type: '专有网络',
children: [
{
id: 121,
name: '实例名称',
status: '失败',
type: '专有网络',
},
],
},
{
id: 13,
name: '实例名称',
status: '失败',
type: '专有网络',
children: [
{
id: 131,
name: '实例名称',
status: '失败',
type: '专有网络',
children: [
{
id: 1311,
name: '实例名称',
status: '失败',
type: '专有网络',
},
{
id: 1312,
name: '实例名称',
status: '失败',
type: '专有网络',
},
],
},
],
},
],
},
{
id: 2,
name: '实例名称',
status: '失败',
type: '专有网络',
},
];
const render = () => {
return (
<Actions>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
<LinkButton onClick={() => {}}>
操作项
</LinkButton>
</Actions>
);
};
export default () => {
return (
<Table dataSource={data} primaryKey="id" isTree>
<Table.Column title="实例ID/名称" dataIndex="name" width={200} />
<Table.Column title="状态" dataIndex="status" />
<Table.Column title="网络类型" dataIndex="type" />
<Table.Column title="操作" cell={render} width={200} />
</Table>
);
};
export const meta = {
title: '树状表格',
describe: '',
};
```
```tsx
import React from 'react';
import { Table } from '@alicloud/console-components';
export default () => {
return (
<Table emptyContent={(
<div>暂无内容，<a href="" style={{ color: '#0064c8' }}>文字链接</a></div>
)}
>
<Table.Column title="实例ID/名称" dataIndex="name" width={200} />
<Table.Column title="状态" dataIndex="status" />
<Table.Column title="网络类型" dataIndex="type" />
<Table.Column title="操作" width={200} />
</Table>
);
};
export const meta = {
title: '空状态表格',
describe: '',
};
```
## API
### Table
| 参数 | 说明 | 类型 | 默认值 | 版本支持 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------- |
| tableLayout | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局<br/><br/>**可选值**:<br/>'fixed', 'auto' | Enum | - | |
| size | 尺寸 small为紧凑模式<br/><br/>**可选值**:<br/>'small', 'medium' | Enum | 'medium' | |
| tableWidth | 表格的总长度，可以这么用：设置表格总长度 、设置部分列的宽度，这样表格会按照剩余空间大小，自动其他列分配宽度 | Number | - | |
| dataSource | 表格展示的数据源 | Array | \[] | |
| onRowClick | 点击表格每一行触发的事件<br/><br/>**签名**:<br/>Function(record: Object, index: Number, e: Event) => void<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>*e*: {Event} DOM事件对象 | Function | () => {} | |
| onRowMouseEnter | 悬浮在表格每一行的时候触发的事件<br/><br/>**签名**:<br/>Function(record: Object, index: Number, e: Event) => void<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>*e*: {Event} DOM事件对象 | Function | () => {} | |
| onRowMouseLeave | 离开表格每一行的时候触发的事件<br/><br/>**签名**:<br/>Function(record: Object, index: Number, e: Event) => void<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>*e*: {Event} DOM事件对象 | Function | () => {} | |
| onSort | 点击列排序触发的事件<br/><br/>**签名**:<br/>Function(dataIndex: String, order: String) => void<br/>**参数**:<br/>*dataIndex*: {String} 指定的排序的字段<br/>*order*: {String} 排序对应的顺序, 有`desc`和`asc`两种 | Function | () => {} | |
| onFilter | 点击过滤确认按钮触发的事件<br/><br/>**签名**:<br/>Function(filterParams: Object) => void<br/>**参数**:<br/>*filterParams*: {Object} 过滤的字段信息 | Function | () => {} | |
| onResizeChange | 重设列尺寸的时候触发的事件<br/><br/>**签名**:<br/>Function(dataIndex: String, value: Number) => void<br/>**参数**:<br/>*dataIndex*: {String} 指定重设的字段<br/>*value*: {Number} 列宽变动的数值 | Function | () => {} | |
| rowProps | 设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。<br/><br/>**签名**:<br/>Function(record: Object, index: Number) => Object<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>**返回值**:<br/>{Object} 需要设置的行属性<br/> | Function | () => {} | |
| cellProps | 设置单元格的属性，通过该属性可以进行合并单元格<br/><br/>**签名**:<br/>Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object<br/>**参数**:<br/>*rowIndex*: {Number} 该行所对应的序列<br/>*colIndex*: {Number} 该列所对应的序列<br/>*dataIndex*: {String} 该列所对应的字段名称<br/>*record*: {Object} 该行对应的记录<br/>**返回值**:<br/>{Object} 返回td元素的所支持的属性对象<br/> | Function | () => {} | |
| keepForwardRenderRows | 虚拟滚动时向前保留渲染的行数 | Number | 10 | |
| hasBorder | 表格是否具有边框 | Boolean | true | |
| hasHeader | 表格是否具有头部 | Boolean | true | |
| isZebra | 表格是否是斑马线 | Boolean | false | |
| loading | 表格是否在加载中 | Boolean | false | |
| loadingComponent | 自定义 Loading 组件<br/>请务必传递 props, 使用方式： loadingComponent={props => \<Loading {...props}/>}<br/><br/>**签名**:<br/>Function(props: LoadingProps) => React.ReactNode<br/>**参数**:<br/>*props*: {LoadingProps} 需要透传给组件的参数<br/>**返回值**:<br/>{React.ReactNode} 展示的组件<br/> | Function | - | |
| filterParams | 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:\[]}}<br/>示例:<br/>假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中<br/>`<Table filterParams={{id: {selectedKeys: ['one']}}}/>` | Object | - | |
| sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{\[dataIndex]: 'asc' | 'desc' } , 例如 {id: 'desc'} | Object | - |
| sortIcons | 自定义排序按钮，例如上下排布的: `{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}` | Object | - | |
| columns | 等同于写子组件 Table.Column ，子组件优先级更高 | Array | - | |
| emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | - | |
| primaryKey | dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | Symbol/String | 'id' | |
| expandedRowRender | 额外渲染行的渲染函数<br/><br/>**签名**:<br/>Function(record: Object, index: Number) => Element<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>**返回值**:<br/>{Element} 渲染内容<br/> | Function | - | |
| rowExpandable | 设置行是否可展开，设置 false 为不可展开<br/><br/>**签名**:<br/>Function(record: Object, index: Number) => Boolean<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>**返回值**:<br/>{Boolean} 是否可展开<br/> | Function | - | |
| expandedRowIndent | 额外渲染行的缩进, 是个二维数组(eg:\[1,1]) 分别表示左右两边的缩进 | Array | - | |
| hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - | |
| getExpandedColProps | 设置额外渲染行的属性<br/><br/>**签名**:<br/>Function(record: Object, index: Number) => Object<br/>**参数**:<br/>*record*: {Object} 该行所对应的数据<br/>*index*: {Number} 该行所对应的序列<br/>**返回值**:<br/>{Object} 额外渲染行的属性<br/> | Function | - | |
| openRowKeys | 当前展开的 Expand行 或者 Tree行 , 传入此属性为受控状态，一般配合 onRowOpen 使用 | Array | - | |
| defaultOpenRowKeys | 默认情况下展开的 Expand行 或者 Tree行，非受控模式 | Array | - | 1.23.22 |
| onRowOpen | 在 Expand行 或者 Tree行 展开或者收起的时候触发的事件<br/><br/>**签名**:<br/>Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void<br/>**参数**:<br/>*openRowKeys*: {Array} 展开的渲染行的key<br/>*currentRowKey*: {String} 当前点击的渲染行的key<br/>*expanded*: {Boolean} 当前点击是展开还是收起<br/>*currentRecord*: {Object} 当前点击额外渲染行的记录 | Function | - | |
| fixedHeader | 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条 | Boolean | - | |
| maxBodyHeight | 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条 | Number/String | - | |
| rowSelection | 是否启用选择模式<br/><br/>**属性**:<br/>*getProps*: {Function} `Function(record, index)=>Object` 获取selection的默认属性<br/>*onChange*: {Function} `Function(selectedRowKeys:Array, records:Array)` 选择改变的时候触发的事件，**注意:** 其中records只会包含当前dataSource的数据，很可能会小于selectedRowKeys的长度。<br/>*onSelect*: {Function} `Function(selected:Boolean, record:Object, records:Array)` 用户手动选择/取消选择某行的回调<br/>*onSelectAll*: {Function} `Function(selected:Boolean, records:Array)` 用户手动选择/取消选择所有行的回调<br/>*selectedRowKeys*: {Array} 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值<br/>*mode*: {String} 选择selection的模式, 可选值为`single`, `multiple`，默认为`multiple`<br/>*columnProps*: {Function} `Function()=>Object` 选择列 的props，例如锁列、对齐等，可使用`Table.Column` 的所有参数<br/>*titleProps*: {Function} `Function()=>Object` 选择列 表头的props，仅在 `multiple` 模式下生效<br/>*titleAddons*: {Function} `Function()=>Node` 选择列 表头添加的元素，在`single` `multiple` 下都生效 | Object | - | |
| stickyHeader | 表头是否是sticky | Boolean | - | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | - | |
| affixProps | affix组件的的属性 | Object | - | |
| indent | 在tree模式下的缩进尺寸， 仅在isTree为true时候有效 | Number | - | |
| isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | Boolean | - | |
| useVirtual | 是否开启虚拟滚动 | Boolean | - | |
| scrollToRow | 滚动到第几行，需要保证行高相同。1.22.15 版本之前仅在虚拟滚动场景下生效，之后在所有情况下生效