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}
  />

在这里插入图片描述

antd Table组件提供了很方便的排序功能,可以通过设置`sorter`属性来实现。 首先在表头中设置`sorter`属性为一个对象,对象中包含两个属性:`compare`和`multiple`。 `compare`属性是一个比较函数,接收两个参数,分别是当前行数据的两个单元格的数据,返回值为`1`或`-1`。当返回值为`1`时表示第一个单元格的数据大于第二个单元格的数据,需要升序排;当返回值为`-1`时表示第二个单元格的数据大于第一个单元格的数据,需要降序排。 `multiple`属性用于支持多排序,当该属性为`true`时,按下`shift`键再点击头可以添加该到排序中。 举个例子,假设我们有一个表格数据如下: ```javascript const dataSource = [ { key: '1', name: '张三', age: 23, address: '北京市海淀区', }, { key: '2', name: '李四', age: 25, address: '上海市黄浦区', }, { key: '3', name: '王五', age: 20, address: '广州市天河区', }, ]; ``` 我们可以在表头中设置`sorter`属性来实现对数据的排序,比如按照年龄从小到大排序: ```javascript import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age, }, { title: '地址', dataIndex: 'address', key: 'address', }, ]; function App() { return <Table dataSource={dataSource} columns={columns} />; } ``` 这样就可以在年龄头点击来实现升序或降序排了。 如果要支持多排序,只需要将`multiple`属性设置为`true`即可: ```javascript import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', sorter: { compare: (a, b) => a.age - b.age, multiple: true }, }, { title: '地址', dataIndex: 'address', key: 'address', sorter: { compare: (a, b) => a.address.localeCompare(b.address), multiple: true }, }, ]; function App() { return <Table dataSource={dataSource} columns={columns} />; } ``` 现在我们可以按下`shift`键再点击地址头来实现多排序了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值