0%

antd表格组件扩展行

开头

  • 最近入职的团队主要技术栈是react,组件库是antd;因为之前写react少,antd也没用过,所以导致上手第一时间还有蛮多不习惯的;然后就有些小坑,记录一下。

问题描述

  • 需求是表格展示数据需要将一些数据隐藏起来,然后通过点击指定的按钮展开/收起一个面板,来显示这些数据
  • 官方有提供这个功能,但是没有提供接口让你可以指定需要展开的按钮,然后查了一圈也没查到,就好好看了看文档,研究了下可以通过几个api来实现这个需求

步骤

需要的api

  • expandable:展开功能配置
  • expandIcon:定义展开图标
  • expandedRowKeys:控制展开的行

思路说明

  • 当table组件配置了expandable后,表格会自动在第一列添加个按钮(是个图标),然后通过这个按钮来控制面板的展开收起
  • 1.通过定义展开图标来隐藏图标,这样就没有点击的目标了,等于取消了该开关
  • 2.设置expandedRowKeys,通过表格每一行的key来控制打开或隐藏那一行面板
  • 3.expandedRowKeys是一个数组,元素为字符串,就是每一行的key,当这个数组有某一行的key,这一行的面板就会被打开,没有反之;利用该特性,在我们需要指定的按钮上绑定一个事件,来动态的添加对应行的key到该数组即可

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { useState } from 'react'
import { Table, Button } from 'antd'
import './main.css'

const Main = () => {
const [openKeys, setOpenKeys] = useState([])
const handleOpenRow = (id) => {
let index = openKeys.indexOf(id)
if (index === -1) {
setOpenKeys(() => {
return [...openKeys, id]
})
} else {
const arr = openKeys
arr.splice(index, 1)
setOpenKeys(() => {
return [...arr]
})
}

}
const columns = [
{
title: 'ID',
align: 'center',
dataIndex: 'key',
},
{
title: '姓名',
align: 'center',
dataIndex: 'name',
}, {
title: "操作",
align: 'center',
render: (row) => {
return (
<Button type="link" onClick={() => handleOpenRow(row.key)}>
{
openKeys.indexOf(row.key) === -1 ? '展开' : '收起'
}
</Button>
)
}
}
]
const tableData = [{
key: '1',
name: "one",
sex: "man"
},
{
key: '2',
name: 'two',
sex: "man"
}]
return (
<div className="container">
<Table columns={columns} dataSource={tableData}
// 开启扩展行
expandable={{
// 定义扩展行内容
expandedRowRender: record => {
return <p>sex:{record.sex}</p>
},
// 自定义按钮图标
expandIcon: _ => '',
// 定义哪些行开启
expandedRowKeys: openKeys
}}
/>
</div>
)
}
export default Main