当前位置: 首页 > Web前端 > vue.js

解决 - iview低版本实现表格拖拽,滚动条列宽计算问题

时间:2023-03-31 18:58:25 vue.js

解决|iview低版本实现表格拖动和滚动条列宽计算的问题???如果大佬觉得我的方案太低,请轻拍我~如果大佬有更好的方案,请告诉我~0/Requirement"iview":"2.13.0"由于某些原因,版本没有升级[os:不要问我为什么~]。项目中表格实现的功能:普通表格固定列自定义选择显示列合并行合并列合并表头由于列数较多,用户希望拖放列宽以更好地比较某些数据。不过拖放功能只在iview的新版本4.0.0+中实现。1/拖拽功能将最新的iview源码与项目中已有的代码进行比较,把拖拽功能放到项目源码中[os:我也知道动态源码不好]cell。vuemixin.jstable-body.vuetable-head.vuetable-tr.vuetable.vueslot.jssummary.vuetable.less别忘了还有style文件在使用table的时候必须有bordercolumn属性和width属性必须有valuecolumn的属性resizable:true2/解决方法查看实际渲染tablewidth与设置的tablewidth不一致。这时候每一列都会被拉平,影响最后一列的宽度作为滚动条。使用方案:通过计算将多余的宽度放在除最后一个滚动条外的其他列上。在table.vue文件中找到handleResize方法//.....codefor(leti=0;i0&&this.showVerticalScrollBar?column.width+usableWidth/this.cloneColumns.length:column.width;column.width=宽度;//注意:更新后的值一定要赋值给原来的值}//....code}//....code△这样计算后会一致。如果你有更好的解决方案请告诉我~~~谢谢~3/YoumaylikeTopic|let和var(1,2)的区别图|let和var(1,2)的区别有无VAR的差异图|差异总结|LET与VAR区别(三、四)图|范围和范围链练习|范围和范围链