Ant Design of Vue Table 表格可伸缩列
首先说一下个人观点,这个框架坑的一批,个人建议如果业务或者项目复杂还是用 Element UI吧
- 首先安装官方拖动插件 vue-draggable-resizable
- 注意这里有个坑 直接 yarn add 或者 npm 的话是安装最新包,这里需要安装
"vue-draggable-resizable": "2.1.0"
否则你懂的
- 引入官方demo
注意坑来了
- 这里表格
columns
里面的宽度必须是Number
类型,否则会报错。 - 如果不设置
width
那么表格会自动计算宽度,这里要注意,如果不设置width
和dataIndex
那么该列就不能拖动,一般最后一列不设置dataIndex
。
如果操作栏要固定的话请继续看
- 固定操作栏会出现固定栏压在表格上,出现表格布局错乱,给表格加一个宽度出现滚动条就行了。
- 如果最后一列必须设置的话,请在 最后一个 .resize-table-th 元素加上 overflow: hidden, 否则会出现横向滚动条。
.resize-table-th {
position: relative;
&:last-of-type {
overflow: hidden;
}
}
必需得给列设置宽度(我特么,每列设置了宽度table右边就会出现空白或者屏幕缩小后table出现滚动条问题, 要么就是最后一列不设置宽度,那样就会自动计算,但是这样在分辨率大的屏幕会出现这一列很宽的情况)。
真特么坑-没办法只能获取宽度自动计算吧
基本思路是获取容器宽度,然后动态设置
columns
里面的width 不过这样的确很麻烦,最好不用固定栏。
如果业务需求要用固定栏,个人慢慢研究吧