在页面渲染时难免会遇见需要列表缩放展示的，在react中依靠组件就可以实现，组件ColumnsType渲染时当数据中含有children时会带有缩放按钮
let array = []; let child = []; for (let i = 0; i < res.data.data.list.length; i++) { if (res.data.data.list[i].pid === 0) { array.push(res.data.data.list[i]); } else { child.push(res.data.data.list[i]); } } for (let i = 0; i < array.length; i++) { array[i].children = []; array[i].key = i + 1; for (let j = 0; j < child.length; j++) { if (child[j].pid === array[i].id) { array[i].children.push(child[j]); } } } for (let i = 0; i < array.length; i++) { for (let j = 0; j < array[i].children.length; j++) { array[i].children[j].key = i + 1 + '-' + (j + 1); } }
注：数据中需要相关key值，否则点击会触发全部
然后就是数据渲染
const columns: ColumnsType<DataType> = [ { title: '档级id', dataIndex: 'id', key: 'id', }, { title: '档级名称', dataIndex: 'title', key: 'title', }, { title: '档级薪资', dataIndex: 'money', key: 'money', }, { title: '操作', dataIndex: 'pid', key: 'pid', width: '30%', align: 'center', render: (pid, row) => ( <Tooltip placement="topLeft"> <div style={{ width: '100%', display: 'flex', justifyContent: 'space-around' }}> <Button type="primary" onClick={() => { console.log(row); setEdit(true); form.setFieldsValue({ editjobs: row.title, editnum: row.money, }); sessionStorage.setItem('dangId', row.id); sessionStorage.setItem('dangpid', row.pid); }} > 编辑 </Button> <Button type="primary" disabled={pid !== 0 ? true : false} onClick={() => { console.log(row); setAddchil(true); form.setFieldsValue({ chilitem: row.id, chiljobs: '', chilnum: '', }); }} > 添加子集 </Button> <Popconfirm title={'您是否要删除它(删除顶级会连带子集一起删除)?'} onConfirm={() => { confirm(row.id); }} okText="确定" cancelText="取消" > <Button type="primary" danger> 删除 </Button> </Popconfirm> </div> </Tooltip> ), }, ];
最后渲染到页面上
<div> <Table columns={columns} dataSource={data} /> </div>
看看效果
