github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(table): 隐藏元素内渲染 table 时获取宽度的行为回退到 2.9.9 之前 (#2402) 

* fix(table): 隐藏元素内渲染 table 时获取宽度的行为回退到 2.9.17 之前

#2187

* update code

* update code

* update code

* chore: typo

* chore: 更新注释
pull/2426/head
morning-star 2024-12-20 16:16:22 +08:00 committed by GitHub
parent 7e207aa0a9
commit ce8fde5d43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/modules/table.js
View File

@ -494,7 +494,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
isNone = parent.css('display') === 'none';
} catch(e){}
var parentElem = parent.parent();
if(parent[0] && parentElem[0] && parentElem[0].nodeType === 1 && (!width || isNone)) return getWidth(parentElem);
if(parent[0] && parentElem && parentElem[0] && (!width || isNone)) return getWidth(parentElem);
return width;
};
return getWidth();
@ -2851,19 +2851,40 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
/**
* 获取元素 content 区域宽度值
*
* layui 内置 jQuery v1.12.4 中的 jQuery.fn.width 始终对值四舍五入(3.x 已修复),
* 在支持 subpixel Rendering 的浏览器中渲染表格，由于列宽分配时计算值精度不足，
* 可能会导致一些小问题(#1726)
*
* 这个方法使用 getComputedStyle 获取精确的宽度值进行计算，为了尽可能和以前的行为
* 保持一致(主要是隐藏元素内渲染 table 递归获取父元素宽度 https://github.com/layui/layui/discussions/2398)，
* 任何非预期的值，都回退到 jQuery.fn.width。未来的版本使用 ResizeObserver 时，可以直接获取表格视图元素的宽度，
* 并移除兼容性代码
*
* @param {JQuery} elem - 元素的 jQuery 对象
*
* @see {@link https://learn.microsoft.com/zh-cn/archive/blogs/ie_cn/css-3}
*/
Class.prototype.getContentWidth = function(elem){
var that = this;
if(!window.getComputedStyle){
// IE 中的 `currentStyle` 获取未显式设置的宽高时会得到 'auto'，jQuery 中有一些 hack 方法获取准确值
if(
// document
elem[0].nodeType === 9 ||
// IE 中 border-box 盒模型，getComputedStyle 得到的 width/height 是按照 content-box 计算出来的
(lay.ie && elem.css('box-sizing') === 'border-box') ||
elem.css('display') === 'none'
){
return elem.width();
}
var size = that.getElementSize(elem[0]);
// display: none|inline 元素，getComputedStyle 无法得到准确的 width/height
if(typeof size === 'undefined' || !size.width){
return elem.width();
}else{
var size = that.getElementSize(elem[0]);
// IE BUG
// border-box: getComputedStyle 得到的 width/height 是按照 content-box 计算出来的
return (size.boxSizing === 'border-box' && !lay.ie)
return size.boxSizing === 'border-box'
? size.width - size.paddingLeft - size.paddingRight - size.borderLeftWidth - size.borderRightWidth
: size.width
}