layui 2.9.16 版本,根据字段字数最大数,表格自适应字段宽度

1、封装一个公共方法在文件上

公共路径 "/assets/common/js/tableUtils.js"

代码如下:

bash 复制代码
// tableUtils.js
function adjustTableFieldWidth(fieldName, cellClass, minWidth = 100) {
    // 获取所有单元格内容
    let maxLength = 0;
    let cells = document.querySelectorAll(`.layui-table-body ${cellClass}`);

    // 遍历所有单元格,找到最长的内容长度
    cells.forEach(cell => {
        let content = cell.textContent || cell.innerText;
        let length = content.length;
        if (length > maxLength) {
            maxLength = length;
        }
    });

    // 计算宽度
    let width = maxLength * 14 + 30; // 每个字符宽度按指定值计算
    width = Math.max(width, minWidth); // 确保最小宽度
    console.log(`${fieldName} width:`, width);

    // 设置表头宽度
    let headerCell = document.querySelector(`.layui-table-header [data-field="${fieldName}"] .layui-table-cell`);
    if (headerCell) {
        headerCell.style.width = `${width}px`;
    }

    // 设置所有单元格宽度
    cells.forEach(cell => {
        cell.style.width = `${width}px`;
    });
}

// 将方法挂载到 layui 对象上,以便在其他文件中通过 layui.tableUtils 调用
layui.define([], function(exports) {
    exports('tableUtils', {
        adjustTableFieldWidth: adjustTableFieldWidth
    });
});

2、html引入

@layout("/common/_container_latest.html",{js:["/assets/purchase/order/purchase_list.js","/assets/common/js/dayJs.min.js","/assets/common/js/tableUtils.js"]}){

3、js引入

bash 复制代码
layui.extend({
	defHttp: '../utils/defHttp',
	numberUtil: '../utils/numberUtil'
}).use(['table', 'admin', 'ax', 'func', 'laydate', 'defHttp', 'numberUtil'], function () {
	var $ = layui.$;
	var table = layui.table;
	var tableUtils = layui.tableUtils;



//   对应文件调用
			// 调整下单人字段宽度
			tableUtils.adjustTableFieldWidth('createUserName', '.laytable-cell-1-0-7',100);
相关推荐
研☆香5 小时前
简单的复选框 全选 反选功能
javascript
hzb666665 小时前
xd_day47文件上传-day55xss
javascript·学习·安全·web安全·php
木子啊5 小时前
HTML防窥技巧:让源码难以偷窥
前端·html·查看源码·禁止查看源码
梦6505 小时前
前端路由守卫:掌控页面跳转的 “守门人”
前端
jiayong235 小时前
前端性能优化系列(二):请求优化策略
前端·性能优化
H_ZMY5 小时前
前端实现 HTTPS 强制跳转与移动端域名自动适配
前端·网络协议·https
We་ct5 小时前
LeetCode 42. 接雨水:双指针解法深度剖析与全方法汇总
前端·算法·leetcode·typescript
灰海5 小时前
vue实现即开即用的AI对话打字机效果
前端·javascript·vue.js·打字机
智绘前端6 小时前
React 组件开发速查卡
前端·react.js·前端框架