Ant Design of Vue Table 表格可伸缩列-入坑指南

Ant Design of Vue Table 表格可伸缩列

首先说一下个人观点，这个框架坑的一批，个人建议如果业务或者项目复杂还是用 Element UI吧

1. 首先安装官方拖动插件 vue-draggable-resizable

• 注意这里有个坑 直接 yarn add 或者 npm 的话是安装最新包，这里需要安装 "vue-draggable-resizable": "2.1.0" 否则你懂的

2. 引入官方demo

注意坑来了

1. 这里表格 columns 里面的宽度必须是 Number 类型，否则会报错。
2. 如果不设置 width 那么表格会自动计算宽度，这里要注意，如果不设置 width 和 dataIndex那么该列就不能拖动，一般最后一列不设置 dataIndex。

如果操作栏要固定的话请继续看

1. 固定操作栏会出现固定栏压在表格上，出现表格布局错乱，给表格加一个宽度出现滚动条就行了。
2. 如果最后一列必须设置的话，请在 最后一个 .resize-table-th 元素加上 overflow: hidden, 否则会出现横向滚动条。

.resize-table-th {
  position: relative;

  &:last-of-type {
    overflow: hidden;
  }
}

3. 必需得给列设置宽度（我特么，每列设置了宽度table右边就会出现空白或者屏幕缩小后table出现滚动条问题, 要么就是最后一列不设置宽度，那样就会自动计算，但是这样在分辨率大的屏幕会出现这一列很宽的情况）。

4. 真特么坑-没办法只能获取宽度自动计算吧

基本思路是获取容器宽度，然后动态设置 columns 里面的width 不过这样的确很麻烦,最好不用固定栏。
如果业务需求要用固定栏，个人慢慢研究吧