当前位置: 首页>大数据>正文

解决 - 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 /

解决方案

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

解决 - iview低版本实现表格拖拽,滚动条列宽计算问题,第1张
△ 现在是有问题的情况

使用方案:把多出来的宽度,通过计算放到除最后一列滚动条的其他列上。

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; // 注意:要把更新后的值赋值给原来的列宽上,这样在渲染时才会使用到
    }
    //.... 代码
}
//....代码
解决 - iview低版本实现表格拖拽,滚动条列宽计算问题,第2张
公号ID:zhaoxiajingjing

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

解决 - iview低版本实现表格拖拽,滚动条列宽计算问题,第3张
来源公号:朝霞的光影笔记

3 /

你可能喜欢
  1. 题目 | let和var的区别(一、二)
  2. 图解 | let和var的区别(一、二)
  3. 题目 | 带VAR和不带VAR的区别
  4. 图解 | 带VAR和不带VAR的区别
  5. 总结 | LET和VAR区别(三、四)
  6. 图解 | 作用域和作用域链
  7. 练习题 | 作用域和作用域链
解决 - iview低版本实现表格拖拽,滚动条列宽计算问题,第4张
公号ID:zhaoxiajingjing

https://www.xamrdz.com/bigdata/7h91993860.html

相关文章: