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

vue 表格左右拖拽调整列宽_解决 | iview低版本实现表格拖拽，滚动条列宽计算问题...相关推荐

React基于antd Table实现可拖拽调整列宽的表格
实现功能 1:表格列宽初始自动分配.列宽总和不能超过容器宽度(无横向滚动条,公司项目特殊需求) 2:当容器宽度变化时,保持当前列宽的分配比例,等比缩小 3:拖动过程中不进行列宽的调整,只有释放之后再进 ...
excel一列求和_超级简单实用excel制作表格，手把手教学（适合无根基初学者）...
我拉网,专注办公模板设计 Excel表格为最常用办公表格吗,其制作在如今工作生活中是最常用到的,重要性可以说和会识字写字一样.如果你一点不会excel制作,没关系,今天我们就以制作一个"成绩 ...
excel表格行宽列高怎么设置_excel怎么调整列宽行高：excel中如何快速调整多行列高和行宽...
怎样设置使EXCEL,单元格行高列高锁定,但可以改字的? 打开菜上的"工具"-"保护"-许用户编辑区域"窗口,"新建"选项,点中& ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
excel合并两列内容_还在为合并WPS表格（Excel）中两列内容而犯愁？此方法简单高效...
我们在处理WPS表格(Excel)数据时,时常需要将两列甚至更多列的内容合并显示在同一列中,就像这样: 这个时候大家是怎么解决的呢? 路人:复制粘贴So easy!小杜:不止两三行啊--路人:复制粘贴 ...
米家扫拖一体机器人重置键_如何评价小米米家扫拖一体机器人？
众所周知,米家前两款扫地机器人(2016年的米家一代 & 2019年的米家1S)都是石头科技的产品,并且从第一代就是LDS激光导航传感器和SLAM算法(Simultaneous Localiz ...
excel表格打印每页都有表头_【Excel】打印超长表格，怎么才能每页都显示表头？...
打印长表格时,是不是遇到过只有第一页有表头,后面几页都没有表头的情况? 怎么解决? 换页处插入一行把表头复制过来? 可以,但是,有更有效率的办法! 来吧!学起来!! 方法:点页面布局--打印标题--打 ...
excel表格打不开是什么原因_为什么你做的Excel表格，总是这么丑？
这是我们最常见到的表格制作很简单,但也是一种很习惯的丑. 为什么不把表格的灰网格线去掉呢,会让你的表格更干净.突出视图 - 去掉网络线前的勾来个大清洗,把所有网络线全部去掉按Ctrl + Sh ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...

vue 表格左右拖拽调整列宽_解决 | iview低版本实现表格拖拽，滚动条列宽计算问题...

vue 表格左右拖拽调整列宽_解决 | iview低版本实现表格拖拽，滚动条列宽计算问题...相关推荐

最新文章

热门文章