import React, {useEffect, useState} from 'react';
import {Table,Checkbox,} from 'antd'
const columns = [
{
title: 'ID',
dataIndex: 'user_id',
key: 'user_id',
width: 100,
},
{
title: '昵称',
dataIndex: 'nickname',
key: 'nickname',
width: 150,
},
{
title: '手机号',
dataIndex: 'phone',
key: 'phone',
width: 150,
},
{
title: '余额',
dataIndex: 'balance',
key: 'balance',
width: 150,
},
{
title: '平台服务费',
dataIndex: 'service_charge',
key: 'service_charge',
width: 150,
},
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
width: 150,
},
{
title: '连续登录天数',
dataIndex: 'login_day',
key: 'login_day',
width: 200,
},
{
title: '最大连续登录天数',
dataIndex: 'login_bigday',
key: 'login_bigday',
width: 200,
},
{
title: '登陆时间',
dataIndex: 'login_time',
key: 'login_time',
width: 200,
},
{
title: '加入时间',
dataIndex: 'join_time',
key: 'join_time',
width: 200,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
width: 150,
},
]
//下拉
const plainOptions = [
{ label: 'ID', value:'user_id' },
{ label: '昵称', value: 'nickname'},
{ label: '手机号', value:'phone' },
{ label: '余额', value: 'balance'},
{ label: '平台服务费', value:'service_charge'},
{ label: '性别', value: 'sex' },
{ label: '连续登录天数', value:'login_day' },
{ label: '最大连续登陆天数', value: 'login_bigday'},
{ label: '登陆时间', value:'login_time' },
{ label: '加入时间', value: 'join_time'},
{ label: '状态', value:'status'},
];
const TableTreeChange = () => {
//把选中的value设置成响应式的用于更新界面
const [selectColum,setSelectColum]=useState(columns)
//原始默认选中的value值
const [checkedList, setCheckedList] = useState(['user_id']);
// 把你勾选到的多选放到一个数组里面
const onChange = (list) => {
setCheckedList(list)
};
useEffect(() => {
console.log(checkedList,66666666666666666)
//使用双重for循环将选中的value和表格中的列中的key值联系起来
let newList=[]
for (let i = 0; i < checkedList.length; i++){
for (let j = 0; j < columns.length; j++){
if (checkedList[i] == columns[j].key) {
newList.push(columns[j]);
}
}
}
//下面部分代码是为了给表格添加一个固定的操作列,如果不需要可以忽略
newList.push({
title: '操作',
key: 'action',
render: (text, record) => (
<span>
<a>edit</a>
</span>
),
width: 100,
fixed: 'right',
})
setSelectColum(newList)
}, [checkedList])
return (
<div>
<Table
columns={selectColum}
pagination={false}
/>
<Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />
</div>
);
};
export default TableTreeChange;
在已经知道表格列勾选一个显示一列
最新推荐文章于 2024-04-26 16:47:03 发布