当前位置:网站首页>antd的Table列选择、列拓展
antd的Table列选择、列拓展
2022-08-09 10:03:00 【高桥靓仔】
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),//用于绑定选择项目的key
onSelect,//选择单个项目时的回调
onSelectAll,//选择单页全部按钮的回调
};
<Table
footer={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 ? (//是否展开态
<div
className={classnames(`${prefixCls}-expand-icon`)}
onClick={e => onExpand(record, e)}
>
收起SKU
<DownOutlined
className={classnames({ [`${prefixCls}-down`]: expanded })}
/>
</div>
) : (
<div
className={classnames(`${prefixCls}-expand-icon`)}
onClick={e => onExpand(record, e)}
>
展开SKU
<UpOutlined
className={classnames({ [`${prefixCls}-down`]: expanded })}
/>
</div>
)
<Table
footer={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}
/>
边栏推荐
猜你喜欢
随机推荐
循环嵌套以及列表的基本操作
搭建Tigase进行二次开发
使用.NET简单实现一个Redis的高性能克隆版(四、五)
MySQL备份与恢复
Collections and Functions
Quick sort eight sorts (3) 】 【 (dynamic figure deduction Hoare, digging holes, front and rear pointer method)
基本运算符
多线程(基础)
诡秘番外:在现代
KeyBERT和labse提取字符串中的关键词
Demand side power load forecasting (Matlab code implementation)
Browser error classification
nacos从下载到安装集群的
【size_t是无符号整数 (-1 > 10) -> 1】
3.List interface and implementation class
2.Collection interface
Secretive present: in modern times
归并排序
【ASM】字节码操作 MethodVisitor 案例实战 生成对象
MySQL约束关系,你必须要知道的知识点!