vue 表格左右拖拽调整列宽_解决 | 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 不要忘记了还有样式文件

在使用时

表格要有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; // 注意：要把更新后的值赋值给原来的列宽上，这样在渲染时才会使用到

}

//.... 代码

}

//....代码

△ 这样计算后，会保持一致

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

3 /

你可能喜欢

作者：Pink