在已经知道表格列勾选一个显示一列

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;