在已經知道錶格列勾選一個顯示一列

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;