在页面渲染时难免会遇见需要列表缩放展示的,在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>
看看效果