解决 | iview低版本实现表格拖拽，滚动条列宽计算问题

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

如果大佬觉得我的方案太low，请打脸轻一点~

如果大佬有更好的方案，请不吝赐教~

---

0 /

需求

"iview": "2.13.0"由于一些原因，版本并没有升级【os：不要问我什么原因~】。

项目中表格实现的功能：

• 普通表格
• 固定列
• 自定义选择展示列
• 合并行
• 合并列
• 合并表头

由于列数较多，用户想要自己拖拽列宽来更好的对比某些数据。但是，拖拽功能在iview新版本4.0.0+才实现的。

1 /

拖拽功能

把最新的iview源码与项目中现有的代码进行对比，把拖拽功能放到项目的源码里【os：我也知道动源码不好】

• cell.vue
• mixin.js
• table-body.vue
• table-head.vue
• table-tr.vue
• table.vue
• slot.js
• summary.vue
• table.less 不要忘记了还有样式文件

在使用时

1. 表格要有border
2. column的属性width要有值
3. column的属性resizable:true

【视频2】拖拽以后会变成好的

2 /

解决方案

查看渲染出来的实际表格宽度与设置的表格宽度是相差一些宽度的。此时，每一列上会被匀一些，影响了最后一列作为滚动条的宽度。

使用方案&#