开头
- 最近入职的团队主要技术栈是react,组件库是antd;因为之前写react少,antd也没用过,所以导致上手第一时间还有蛮多不习惯的;然后就有些小坑,记录一下。
问题描述
- 需求是表格展示数据需要将一些数据隐藏起来,然后通过点击指定的按钮展开/收起一个面板,来显示这些数据
- 官方有提供这个功能,但是没有提供接口让你可以指定需要展开的按钮,然后查了一圈也没查到,就好好看了看文档,研究了下可以通过几个api来实现这个需求
步骤
需要的api
- expandable:展开功能配置
- expandIcon:定义展开图标
- expandedRowKeys:控制展开的行
思路说明
- 当table组件配置了expandable后,表格会自动在第一列添加个按钮(是个图标),然后通过这个按钮来控制面板的展开收起
- 1.通过定义展开图标来隐藏图标,这样就没有点击的目标了,等于取消了该开关
- 2.设置expandedRowKeys,通过表格每一行的key来控制打开或隐藏那一行面板
- 3.expandedRowKeys是一个数组,元素为字符串,就是每一行的key,当这个数组有某一行的key,这一行的面板就会被打开,没有反之;利用该特性,在我们需要指定的按钮上绑定一个事件,来动态的添加对应行的key到该数组即可
代码
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