layui数据表格多选框错位问题

最新推荐文章于 2024-11-28 15:54:13 发布

原创最新推荐文章于 2024-11-28 15:54:13 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #layui

笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

layui-table

1 篇文章

订阅专栏

在使用layui框架的表格组件时，开启多选框功能会导致表头错位，原因是表头单元格宽度不足内容导致换行。解决办法是定位到换行的表头单元格，并增加其宽度。

部署运行你感兴趣的模型镜像

layui数据表格多选框错位问题

因为当我们选中{ type: ‘checkbox’, fixed: “left” },开启这个多选框的时候，其实框架会自动在原来的基础上再多加一个多选框，但是主要原因是因为表头内容与宽度产生的问题，因为表头的单元格的宽度不够显示内容，产生的换行，所以表头换行，高度变大所以就会产生错位

解决方法：我们需找到表头换行的单元格，然后

cols: [[
                    { type: 'checkbox', fixed: "left" },
                    { field: 'ProjectName', title: "项目名称", width: '100'},
                    { field: 'DocumentCode', title: "文档编号", width: '200'},
                    { field: 'MenuName', title: '菜单名称', width: '200' },
                    { field: 'ProblemDescription', title: '问题描述', width: '600'},
                    { field: 'State', title: '文档状态',  templet: '<div>{{ formatterState(d.State) }}</div> ', width: '100'},
                    { field: 'DevelopmentHeadName', title: '接档人', width: '80' },
                    { field: 'DevelopmentEvaluateDay', title: '预计开发时长', width: '120' },
                    { field: 'ImplementRequestCompletionDate', title: "期望完成时间", sort: true,templet: '<div>{{ formatDate(d.ImplementRequestCompletionDate,"yyyy-MM-dd") }}</div>', width: '150' },
                    { field: 'TestThroughTime', title: "分配完成时间", sort: true, templet: '<div>{{ formatDate(d.TestThroughTime,"yyyy-MM-dd") }}</div>', width: '150' },
                    { field: 'IsInsertDocument', title: "是否需要分配到本周", templet: '<div>{{ getState(d.IsInsertDocument) }}</div> ', width: '180' },
                    { field: 'AuggestDevelopmentName', title: "建议开发", width: '100' },
                    //{ field: 'IsInsertDocument', title: "是否插入", width: '100' },
                    //{ field: 'NowProgress', title: "当前完成进度", width: '120'},
                    { field: 'StaffName', title: "提交实施", width: '100' },
                    //{ field: 'DevelopmentFinishDate', title: "开发实际完成日期", templet: '<div>{{ formatDate(d.DevelopmentFinishDate,"yyyy-MM-dd") }}</div>', width: '150' },
                ]],

把对应的width设置宽点，例如{ field: ‘ImplementRequestCompletionDate’, title: “期望完成时间”, sort: true,templet: ‘

’, width: ‘150’ },的宽度由120改为150之后问题解决。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率