文 / 景朝霞
来源公号 / 朝霞的光影笔记
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 不要忘记了还有样式文件
在使用时
- 表格要有border
- column的属性width要有值
- column的属性
resizable:true
2 /
解决方案
查看渲染出来的实际表格宽度与设置的表格宽度是相差一些宽度的。此时，每一列上会被匀一些，影响了最后一列作为滚动条的宽度。
△ 现在是有问题的情况
使用方案：把多出来的宽度，通过计算放到除最后一列滚动条的其他列上。
table.vue文件中找到handleResize方法
// ..... 代码
for (let i = 0; i < this.cloneColumns.length; i++) {
const column = this.cloneColumns[i];
let width = columnWidth + (column.minWidth?column.minWidth:0);
if(column.width){
/* width = column.width; 这是原来的代码*/
// 在表格宽度不够时，让多出来的匀到各个列上：解决滚动条的宽度问题
width = usableWidth>0&&this.showVerticalScrollBar ? column.width+usableWidth/this.cloneColumns.length : column.width;
column.width= width; // 注意：要把更新后的值赋值给原来的列宽上，这样在渲染时才会使用到
}
//.... 代码
}
//....代码
公号ID：zhaoxiajingjing
△ 这样计算后，会保持一致
来源公号：朝霞的光影笔记
请有更好方案的大佬，不吝赐教~~谢谢
3 /
你可能喜欢
- 题目 | let和var的区别（一、二）
- 图解 | let和var的区别（一、二）
- 题目 | 带VAR和不带VAR的区别
- 图解 | 带VAR和不带VAR的区别
- 总结 | LET和VAR区别（三、四）
- 图解 | 作用域和作用域链
- 练习题 | 作用域和作用域链
公号ID：zhaoxiajingjing
