AntDesign——TableAPI学习

news/2024/10/30 17:20:35/

table表格用于展示数据

https://ant.design/components/table-cn#table

1.bordered

false不显示每一个小表格的边框,true反之

2.columns 列名及列数据,接受columns数组

2.1 colums中必须声明的属性

title(列标题)

dataIndex(列数据在数据项中对应的路径,支持通过数组查询嵌套路径)

key(React 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性)

2.2 其他

align:对齐方式

className:列样式类名(自定义列样式?)

colSpan:正常是一列一列数据对应,传入数字能够让一列对应几列数据,但是后面的列数据会因此移动

dataIndex

const dataSource = [ { id: 1, name: 'John', age: 28, address: { city: 'New York', country: 'USA' } }, { id: 2, name: 'Mary', age: 25, address: { city: 'Paris', country: 'France' } } 
]; 
<ProTable columns={[ { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, { title: '所在国家', dataIndex: ['address', 'country'], // 设置为一个数组 }, ]} dataSource={dataSource} 
/> 

defaultFilteredValue:

const dataSource = [ { id: 1, name: "John", age: 28, address: "New York" }, { id: 2, name: "Mary", age: 25, address: "Paris" }, { id: 3, name: "Peter", age: 32, address: "London" }, { id: 4, name: "Tom", age: 21, address: "Sydney" }, 
]; 
<ProTable columns={[ { title: "ID", dataIndex: "id" }, { title: "姓名", dataIndex: "name" }, { title: "年龄", dataIndex: "age" }, { title: "地址", dataIndex: "address" }, ]} dataSource={dataSource} defaultFilteredValue={{ age: [">", 25], address: ["=", "London"], 
}} 
/> 

 filterResetToDefaultFilteredValue:点击重置按钮的时候,是否恢复默认筛选值

defaultSortOrder:默认排序顺序 ascend | descend

ellipsis:该属性需要与 width 属性一起使用,以控制文本省略的容器宽度。超过width用省略号表示。

filterDropdown:自定义筛选菜单

<Table dataSource={data} columns={[ { title: 'Name', dataIndex: 'name', key: 'name', filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( <div style={{ padding: 8 }}> <Input placeholder="Search name" value={selectedKeys[0]} onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={confirm} style={{ width: 188, marginBottom: 8, display: 'block' }} /> <Button onClick={confirm} size="small" style={{ width: 90, marginRight: 8 }}> Search </Button> <Button onClick={clearFilters} size="small" style={{ width: 90 }}> Reset </Button> </div> ), onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()), onFilterDropdownVisibleChange: (visible) => { if (visible) { setTimeout(() => searchInputRef.current.select(), 100); } }, render: (text) => <a>{text}</a>, }, { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', key: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], onFilter: (value, record) => record.address.includes(value), }, ]} 
/> 

 filterDropdownOpen:用于控制自定义筛选菜单是否可见

filtered:筛选后筛选图标是否高亮

filteredValue:筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组

filterIcon: 例:<FilterOutlined />,筛选图标样式

filterMultiple:是否多选

filterMode:指定筛选菜单的用户界面 filterMode: 'tree',树形筛选框

filterSearch:筛选菜单项是否可搜索

filters:text为显示名称,value与onFilter中的value对应。

    filters: [{text: 'Joe',value: 'Joe',},{text: 'Jim',value: 'Jim',},{text: 'Submenu',value: 'Submenu',children: [{text: 'Green',value: 'Green',},{text: 'Black',value: 'Black',},],},

 fixed:列是否固定,可选 true (等效于 left) leftright

render:当表中数据需要操作或者更改样式时,生成复杂数据的渲染函数,参数分别为当前的值,当前数据,索引

1)渲染一个包含三个子项的复杂单元格

<Table dataSource={dataSource}> <Column title="姓名" dataIndex="name" key="name" /> <Column title="成绩" key="score" render={(text, record) => ( <div> <div>语文:{record.score.chinese}</div> <div>数学:{record.score.math}</div> <div>英语:{record.score.english}</div> </div> )} /> 
</Table> 

 2)在单元格中增加样式

<Table dataSource={dataSource}>  <Column  title="Name"  dataIndex="name"  key="name"  render={(text, record) => (  <span style={{ color: record.isMale ? 'blue' : 'pink' }}>{record.name}</span>  )}  />  <Column  title="Age"  dataIndex="age"  key="age"  />  
</Table>  

 responsive:响应式 breakpoint 配置列表。未设置则始终可见。响应式设计(Responsive Design)是指网站或应用程序设计的一种方法,它可以让网站或应用程序根据不同的设备和屏幕尺寸自动调整布局和内容,以提供最佳的用户体验。简单来说,响应式设计就是一个网站或应用程序可以适配不同的设备,包括桌面电脑、平板电脑和手机等。

const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', responsive: ['md'], }, { title: 'Age', dataIndex: 'age', key: 'age', responsive: ['lg'], }, { title: 'Address', dataIndex: 'address', key: 'address', responsive: ['xl'], }, 
] 

 我们在列定义中使用了responsive属性,并传入一个数组,表示该列应该在何种设备大小下显示。在本例中,Name列在medium设备大小及以上的屏幕上显示,Age列在large设备大小及以上的屏幕上显示,Address列在extra-large设备大小及以上的屏幕上显示。

rowScope:设置列范围row | rowgroup

shouldCellUpdate自定义单元格渲染时机

  { title: 'Address', dataIndex: 'address', key: 'address', sorter: (a, b) => a.address.localeCompare(b.address), showSorterTooltip: true, // 显示排序提示 // 自定义提示信息的样式和内容 titleTooltip: () => ( <span> This is the address column, it can be sorted by clicking the column header. </span> ), 

sortDirections、sorter、sortOrder(外部组件影响排序)排序

onCell是Ant Design组件中Table表格的一个属性,用于自定义每个单元格(Cell)的属性和事件处理函数。
onCell接受一个函数参数,该函数需要返回一个包含对应单元格属性和事件处理函数的对象。该对象中通常包含一些标准的HTML和React事件处理函数,例如onClick、onMouseEnter等。
使用onCell,可以自定义每个单元格的属性和事件处理函数,从而实现一些复杂的交互效果。

    onCell: eventData => ({  onClick: () => {  console.log(`Clicked name cell: ${eventData.record.name}`);  },  }), 

 onFilter: (value, record) => record['project_version'].includes(value)

rowSelection:列选择

 rowSelection={{ type: selectionType, ...rowSelection, }}

multiple:列升序降序的优先级,数值越大优先级越高


http://www.ppmy.cn/news/341928.html

相关文章

敏捷项目管理

在了解敏捷项目管理之前&#xff0c;我们先看下敏捷和传统项目管理有什么区别。 传统项目管理&#xff1a;阶段式项目管理模式。 制定详细的计划和步骤&#xff0c;按计划执行&#xff0c;直到所有的计划执行全部结束。 敏捷项目管理模式&#xff0c;从愿景和高价值的目标出发…

42从零开始学Java之instanceOf关键字是怎么用的?

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 在上一篇文章中&#xff0c;壹哥给大家讲解了向上转型和向下转型。其中在进行向下转型时&#xff0c;…

❤ 主要使用的版本和对应体系

nvm 地址&#xff1a; https://github.com/coreybutler/nvm-windows/releases node地址&#xff1a; ❤ 主要使用的版本和对应体系 主要使用使用工具版本版本vue2 Vuex……模式nvm 版本 Vue2版本 2.9.6 node 12.12.2 git 2.26.0 npm 7.18.1 vue3 typescript vite pinia…

SB声卡芯片DP108的基础上,原厂推出优化升级版DP108T

SB声卡芯片DP108是一款完全替代CM108的高度集成的单芯片USB音频解决方案芯片。方便的USB即插即用的兼容性,用户可以快速创建易用性,高质量和便携式USB音频产品基于高度集成的单芯片解决方案。所有重要的模拟模块嵌入DP108,包括双DAC和耳机放大器&#xff0c;ADC和麦克风助力器&…

【转载】USB Type-C设备是否需要CC逻辑芯片

USB Type-C凭借其自身强大的功能&#xff0c;在Apple, Intel, Google等厂商的强势推动下&#xff0c;必将迅速引发一场USB接口的革命&#xff0c;并将积极影响我们日常生活的方方面面。本文讨论一个重要的专业问题&#xff1a;USB Type-C设备到底是否需要CC逻辑检测与控制芯片&…

SSS1530 QFN32 4*4小封装USB音频芯片方案,支持USB Type-C耳机方案

SSS1530 QFN32 4*4小封装USB音频芯片方案&#xff0c;支持USB Type-C耳机和Linging耳机。并提供各种高级功能&#xff0c;诸如耳机放大器、主动降噪、96kHz最高采样率、语音唤醒、超低功耗等等。 产品特点 嵌入式USB FS收发器和控制器 嵌入式USB 48mhz芯片振荡器无需外部…

USB Type-C接口(1)——硬件/Lenovo

对比USB2.0 和3.0规范中给出的各式各样的接口&#xff0c;对实际应用可太不方便了&#xff0c;只有接口的天下统一&#xff0c;用户才能更方便更省钱&#xff0c;于是&#xff0c;一位天降猛男——type-C接口出现了。 Type&#xff0d;C是我们目前最常见的接口&#xff0c;因为…

【Codecs系列】视频格式Y4M详解

DATE: 2021.8.27 文章目录 1、参考2 、Y4M格式是什么?1、参考 Y4M(YUV4MPEG2) 格式文件详解 y4m转yuv的方法 Y4M 格式详解 2 、Y4M格式是什么? Y4M(YUV4MPEG2)文件格式是一种以头文件存储视频规格的未压缩视频序列。简单来说,在原始的YUV序列的起始和每一帧的头部都加入了…