antd的Table列选择、列拓展

列选择：rowSelection属性

//选择的项目存放在数组中
const [selectedRow, setSelectedRow] = useState<GoodsListType[]>([]);//选择此项
const onSelect = (value: any) => {selectedRow.some(i => i.key === value.key)? setSelectedRow(selectedRow.filter(i => i.key !== value.key)): setSelectedRow([...selectedRow, value]);
};//选择当前页所有
const onSelectAll = (value: any) => {value? setSelectedRow([...selectedRow,...goodsList.map(i => ({ ...i, key: i.plat_goods_id })).filter((item: any) => !selectedRow.map(el => el.key).includes(item.key),),]): setSelectedRow(selectedRow.filter((i: any) =>!goodsList.map(item => item.plat_goods_id).includes(i.key),),);
};//配置rowSelection属性
const selectedRowSelection: TableRowSelection<GoodsListType> = {selectedRowKeys: selectedRow.map(i => i.key),//用于绑定选择项目的keyonSelect,//选择单个项目时的回调onSelectAll,//选择单页全部按钮的回调
};<Tablefooter={tableFooter}title={tableTitle}dataSource={goodsList.map(i => ({ ...i, key: i.plat_goods_id }))}pagination={false}columns={defaultAllColumns}rowSelection={selectedRowSelection}//通过这个属性实现列选择的配置loading={loading}{...restProps}/>

列拓展：expandable属性

const expandedRowRender = (record) => {console.log(record)return <div>111<div/>
};const expandIcon = ({ expanded, onExpand, record }) =>expanded ? (//是否展开态<divclassName={classnames(`${prefixCls}-expand-icon`)}onClick={e => onExpand(record, e)}>收起SKU&nbsp;<DownOutlinedclassName={classnames({ [`${prefixCls}-down`]: expanded })}/></div>) : (<divclassName={classnames(`${prefixCls}-expand-icon`)}onClick={e => onExpand(record, e)}>展开SKU&nbsp;<UpOutlinedclassName={classnames({ [`${prefixCls}-down`]: expanded })}/></div>)<Tablefooter={tableFooter}title={tableTitle}dataSource={goodsList.map(i => ({ ...i, key: i.plat_goods_id }))}pagination={false}columns={defaultAllColumns}expandable={{expandedRowRender, //渲染展开项expandIconColumnIndex: defaultAllColumns.length + 1,//拓展图标想要渲染在第几列expandIcon, //自定义展开图标}}loading={loading}{...restProps}/>

antd的Table列选择、列拓展相关推荐

data.table中选择列与data.frame的区别: This difference to data.frame is deliberate and explained in FAQ 1.1.
太长不看版 data.table格式在调用列时, 加上逗号, 如果是字符串, 加上with=FALSE trait = "yield" dat[,trait,with=F] 使用o ...
react antd组件table跨行跨列
给官网上的看不懂的同行写的,毕竟我一开始也看不懂(现在也没看懂) 逻辑是在列的设置上写,通过条件判断跨行还是不跨行以及跨多少行 const columns =[title: '姓名',dataInde ...
调用函数的ALV、面向对象的ALV设置带选择列
这个就是通过对应的选择列,实现对ALV数据的选择,在调用函数的ALV和面向对象的ALV 实现方法存在差异,下面讲两者的方法: 1)调用函数的ALV. 通过 SLIS_LAYOUT_ALV-BOX ...
分布式 PostgreSQL 集群(Citus)，分布式表中的分布列选择最佳实践
确定应用程序类型在 Citus 集群上运行高效查询要求数据在机器之间正确分布.这因应用程序类型及其查询模式而异. 大致上有两种应用程序在 Citus 上运行良好.数据建模的第一步是确定哪些应用程序类 ...
Devexpress GridControl中 repositoryItemCheckEdit作为选择列以及作为显示列的使用方法
一.在gridcontrol列表控件中使用单选框作为选择列,这里有两种方式. 方式一:选择gridcontrol控件的Run Designer按钮,添加一列,设置该列的ColumnEdit为check ...
DataGrid中选择列文本根据绑定数据不同显示为不同颜色的处理办法
目前在维护一个Web应用,用户提出一些对我来说要求比较高的需求,摸索了一下,终于解决了.和大家分享一下: 问题:一般DataGrid中会有部分选择列,例如: <a ...
使用EditPlus 删除文本文件中多余的空行和 EditPlus 选择列
使用EditPlus 删除文本文件中多余的空行可以直接调出查找,然后给在Find what中输入正则表达式 ^[ ＼t]*＼n ,注意＼t前有空格符. EditPlus 选择列注意:在自动换行的 ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
hash table(完全散列实现的哈希表)
hash table(完全散列实现的哈希表) 完全散列特点:静态的,创建时候完成了散列表的生成. 不可以删,也不可以增加数据.只可以修改数据. 内部用全域散列生成 #ifndef C11LEARN_ ...

antd的Table列选择、列拓展

antd的Table列选择、列拓展

列选择：rowSelection属性

列拓展：expandable属性

antd的Table列选择、列拓展相关推荐

最新文章

热门文章