AntDesign——TableAPI学习

最新推荐文章于 2024-04-03 16:09:12 发布

BJERGSEN97ai

最新推荐文章于 2024-04-03 16:09:12 发布

阅读量1.2k

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_40665593/article/details/131070339

版权

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) left、right

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:列升序降序的优先级，数值越大优先级越高