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

本文介绍了在iview 2.13.0版本中为表格添加拖拽调整列宽的功能,详细讲解了如何通过修改源码实现这一特性,并解决了因滚动条导致的列宽计算不准确的问题。通过计算并分配多余宽度,确保了表格显示的一致性。
摘要由CSDN通过智能技术生成

文 /

景朝霞

来源公号 /

朝霞的光影笔记

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 /

解决方案

查看渲染出来的实际表格宽度与设置的表格宽度是相差一些宽度的。此时,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值