cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
64 lines • 56.8 kB
Markdown
表格也可被视一类列表，表格有多种分类，常用于信息展示场景，由表头操作区、表格内容区、底部操作区3部分组成，通常表头操作区包括主行动、搜索、表格展示设置等功能，底部操作区则主要提供批量操作、翻页功能。
> 📢 注意: 如果是 `import { Table } from '@ali/xconsole/ui'`, 则可以使用更多高级表格的功能。更多高级功能参见 增强表格 API
> 📢 注意: 如果直接通过 `import { Table } from '@alicloud/console-components'` 引入的，则只能使用当前文档中的 API.
| 参数 | 说明 | 类型 | 默认值 | 版本支持 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | ------- |
| 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 版本之前仅在虚拟滚动场景下生效，之后在所有情况下生效 | Number | - | 1.22.15 |
| onBodyScroll | 在内容区域滚动的时候触发的函数<br/><br/>**签名**:<br/>Function() => void | Function | - | |
| expandedIndexSimulate | 开启时，getExpandedColProps() / rowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...) | Boolean | false | |
| crossline | 在 hover 时出现十字参考轴，适用于表头比较复杂，需要做表头分类的场景。 | Boolean | false | |
| 参数 | 说明 | 类型 | 默认值 | 版本支持 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------- | ---- |
| dataIndex | 指定列对应的字段，支持`a.b`形式的快速取值 | String | - | |
| cell | 行渲染的逻辑<br/>value, rowIndex, record, context四个属性只可读不可被更改<br/>Function(value, index, record) => Element | ReactElement/ReactNode/Function | value => value | |
| title | 表头显示的内容 | ReactElement/ReactNode/Function | - | |
| htmlTitle | 写到 header 单元格上的title属性 | String | - | |
| sortable | 是否支持排序 | Boolean | - | |
| sortDirections | 排序的方向。<br/>设置 \['desc', 'asc']，表示降序、升序<br/>设置 \['desc', 'asc', 'default']，表示表示降序、升序、不排序 | Array\<Enum> | - | 1.23 |
| width | 列宽，注意在锁列的情况下一定需要配置宽度 | Number/String | - | |
| align | 单元格的对齐方式<br/><br/>**可选值**:<br/>'left', 'center', 'right' | Enum | - | |
| alignHeader | 单元格标题的对齐方式, 不配置默认读取align值<br/><br/>**可选值**:<br/>'left', 'center', 'right' | Enum | - | |
| filters | 生成标题过滤的菜单, 格式为`[{label:'xxx', value:'xxx'}]` | Array\<Object> | - | |
| filterMode | 过滤的模式是单选还是多选<br/><br/>**可选值**:<br/>'single', 'multiple' | Enum | 'multiple' | |
| filterMenuProps | filter 模式下传递给 Menu 菜单的属性， 默认继承 `Menu` 组件的API<br/><br/>**属性**:<br/>*subMenuSelectable*: {Boolean} 默认为`false` subMenu是否可选择<br/>