antd的Table列选择、列拓展

本文介绍了antd Table组件中如何实现列选择和列拓展功能,详细讲解了rowSelection属性用于列选择,以及expandable属性用于列拓展的操作方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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&nbsp;
      <DownOutlined
        className={classnames({ [`${prefixCls}-down`]: expanded })}
        />
    </div>
    ) : (
    <div
      className={classnames(`${prefixCls}-expand-icon`)}
      onClick={e => onExpand(record, e)}
      >
      展开SKU&nbsp;
      <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}
  />

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值