react+ant实现动态添加表格中的列
效果图如下（通过右上角勾选需要展示的列名实现动态添加表格列）
①使用ant框架中的tabel表格组件定义表格中每列需要的数据和宽度，具体参考ant文档
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,
},
]引入表格组件
columns={selectColum}：这里是需要展示的列
Data是需要显示在表格中的数据
scroll={{ x: 'max-content' }}：这句一定要设置，表示设置横向滚动，并且会随着表格添加和减少列自动设置表格总宽度
②接下来就是设置下拉选择框，我这里的下拉选择框是自己使用固定定位写的，大家可以根据自己的想法进行设计
options:设置可选项，具体参考ant文档
value：指定选中的项
onChange：点击发生变化时的回调自带参数即选中的value组成的数组
//下拉
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'},
];//原始默认选中的value值
const [checkedList, setCheckedList] = useState(['id','nickname','phoneNumber','balance']);//把选中的value设置成响应式的用于更新界面
const [selectColum,setSelectColum]=useState(columns)
const onChange = (list) => {
setCheckedList(list)
};③接下来就是如何将选中的value值和表格中的每一列进行联系起来
这里运用到的时react生命周期函数中的useEffect，当下拉框中选中的值发生改变的时候，里面的代码自动执行
useEffect(() => {
console.log(checkedList)
//使用双重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) => (
editeItem(e, record)}>edit{record.id}
),
width: 100,
fixed: 'right',
})
console.log('newlist',newList)
setSelectColum(newList)
}, [checkedList])以上是个人写的一个粗糙的小案例，有很多不足的地方，请谅解