javascript - 实现table表头折叠？

Question

我想请教一下，就是我这个用的andesign Table 组件 我想实现的功能是这个列表里面的表头里面的每一列加上表头都是可折叠的，有什么好的思路可以实现吗？又或者有没有其他方法可以解决这个业务问题。

业务解决问题：核心就是这个列表是动态列表表头是后端返回回来的，而且表头里面的每一项都很多，导致用户进来需要拉取滚动条比较麻烦。

自己的想法：我试过放大整个table，或者表头可收缩放大缩小，亦或者进来时候直接滚动条滚动到需要填写的位置感觉体验都不是很好。
希望有大佬帮忙解答，提供思路，写出来会请喝一杯奶茶

table表头可折叠

Answer 1

现成办法antDesign增强组件

思路

1、首先就是动态表头与表数据导致你就玩不出另外的操作方式。针对这种列多且有操作的，我们公司都是先5-8列展现概况，最后一列显示操作，带着行id或拼接的主键当参数，在弹出界面调另外的接口，数据回填展现，修改再保存刷父组件table数据。不过还是看你的需求，用户喜欢怎么操作。

Answer 2

看你描述的问题就是列比较多，需要左右滚动比较麻烦，通常这样的做法就是自定义列显示，可以让用户自定义列显示。

可以参考这个插件的做法：

https://vxetable.cn/#/component/table/custom/toolbar

SPUG的做法也是这样：

禅道：

折叠列也是可以实现：
https://vxetable.cn/#/component/table/custom/collapseColumn

折叠前：

折叠后：