layui tree-table 四级表头数据错位

最新推荐文章于 2024-06-28 03:45:22 发布

xslz_grf

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量2.3k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/xslz_grf/article/details/85849450

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

画圈的地方为多出来的列

问题分析

查看源码发现多了一些data-field='数字'的列,如下图

解决方法

在done回调方法中隐藏data-field='数字'的列

$('.layui-table-body').find('td').each(function (index,element) {
   if($(this).attr('data-field')>=0){
      $(this).css('display','none');
   }
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xslz_grf

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - Element Plus 树形表格组件el-table存在多级嵌套子项子集时“第一列不对齐“问题，包含children下级的树状表格第一行数据没对齐跑偏了详细解决，展开二级时内容向右偏移

王佳斌

08-07

2711

vue3，element-plus，表格组件Table，el-table，树形数据不对齐的解决方案，Tree，树形表格，树状表格，嵌套复杂表格，对不齐，子集的行数据没有与上级的数据对齐，偏移，Element plus表格开启children下级时第一行不对齐，有下级表格第一条数据没对齐怎么办，往右边偏移，每次展开的二级数据第一行数据都会向右偏移一点距离，表格带子数据的情况下如何解决首列数据对齐，树形表格第一列文字如何居中对齐，树形表格展示及数据对齐，节点，居中对齐，deep，无法覆盖样式，树表格有无子节点内

ant-design React table表格组件合并展开错位解决

weixin_45609894的博客

08-25

1470

2. 修改Oncell方法，根据上面计算的sortRowSpan的值，多个相同的sort设置rowSpan等于它的个数，不需要合并的sort，rowSpan设置为0。4. 这时候问题基本解决了，展开和合并，第一列的合并没问题，但是最后一列又出现了错位，因为expandable展开的td的colspan默认和columns长度一致。我这种写法rowSpan是固定的，前面第一列的合并个数是固定的，而antd的展开是相当于增加了一整行，然后页面合并就会错位。我太菜，搞不定了，求助大佬。

2 条评论您还未登录，请先登录后发表或查看评论

Layui树形表格treetable

12-13

实现layui的树形表格treeTable,在layui数据表格之上进行扩展实现,详细使用方法请参考压缩包中的README.md文件和实例.

layui tree-table四级表头表头合并后文字显示不全

笑对人生

01-05

2369

表头合并三行之后,列很宽但是内容却显示不全原因分析查看源码发现表头文字处有个div,div的宽度是60px,组件中已经写死了解决方法在done回调方法中让其div的宽度等于上级th的宽度就可以了 $('.layui-table-header').find('th').each(function (index,element) { if($(this).a...

layui 树形表格 treeTable使用详细指南，不能折叠解决办法

2401_85767310的博客

06-28

3471

主要功能有，树形表格展示，添加，修改，删除，批量删除，搜索，layui时间日期自定义格式列，表格全部展开、折叠、刷新表格等功能，有兴趣的看下吧~~商品分类管理批量删除添加

layUI中table表格表头与内容错位

qq_40814139的博客

03-06

7974

在使用layUI框架展示数据时，加了checkbox之后表头与内容出现错位（注意：没加checkbox时，没有出现错位。），如下图：对应的代码如下：不是其他人说的那样什么多了个逗号，而是由于其中有一列设置display:none,而宽度设置为0，我把宽度改为80就解决问题了。修改后的页面： ...

【Layui&zTree】解决layui固定列因zTree css所影响而出现的错位问题

Tuz的博客

12-03

1760

问题：项目模块要用到zTree和layui数据表格，但是当博主完成zTree树创建后，发现layui切换分页时，出现了如下图的问题：出现的原因： layui样式css和zTree的demo.css文件样式冲突，demo.css文件不是必要的，可以不引入（博主引入时是直接复制粘贴，没太注意）。解决方案：删除或注释demo.css的引入。如有错误，评论指正。...

layui 行高不对称处理

这么多柠檬c

01-01

549

done: function(res, curr, count){ //修改th 第一个长度 $($($(".layui-table-header thead th")[0])[0]).width(55); $(".layui-table-main tr").each(function (index ,val) { //下方第一位所有高度 $($(".layui-table-fixed .

【el-table】

qq_44559317的博客

02-17

3738

el-table 使用总结实现树形数据与懒加载、列字段排序、表头固定、详情路由跳转、后端分页手写树形表格并实现表头排序

Ant Design vue3版本里面a-table第一列合并相同的，第二列可以展开子集（修复bug版）

qq_49074952的博客

05-30

630

昨天那个解决方式经过测试发现只能满足最后一行是需要展开的任务时才生效，当任务行在中间，然后存在子集时，点击展开会出现错位的现象，如下图：又请教了一位大佬，大佬研究了两个多小时，最终完成功能实现，虽然有点看不咋懂，但记录一下下次遇到类似的好找。Design vue 中的table和vue3实现第一列动态合并相同数据，第二列以树形展开。合并方法：（此处将之前的方法删掉了许多，变动较大）主要变动：（获取数据的方法和展开方法）表格渲染：（此处增加了展开的方法）表头渲染：（此处并无太大修改）

【element ui】问题集锦

Beam

03-29

2117

现象：在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。解决：官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。代码： watch: { '$attrs.data': { handler (val) { this.$refs.com

layui动态加载多表头的实例

01-19

效果动态生成header 返回的header数据：格式为数组，因为是二级表头，所以是二元数组后台动态拼接数组，返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头 var header= []; var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan: 2}]; var header2= []; $.ajax({ type: get,

layui 布局 table表行高度不一致时导致的固定列行高错乱问题解决

守护大白菜的博客

12-01

2437

layui table表格固定列行高与数据列行高不一致解决

layui(四)——table组件常见用法总结

banyongzhan5405的博客

08-09

335

　　table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。下边整理了一个栗子： <html xmlns="...

Layui使用treetable复杂表头以及样式错乱、标题过长

青春不打烊的博客

05-13

1484

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/taglibs.jsp" %> <!DOCTYPE html> <html> <head> <%@ include file="/common/meta.jsp"%> <link href="${ctx}/static/cs.

树形表格的小箭头更换位置不从第一列开始

趟过java，遇见web

12-13

680

树形表格，el-table，小箭头

layui排序箭头

Khun_HWJ的博客

03-04

857

var sortObj = {field:'created_at', type:'desc'} function renderTable() { table.render({ elem: '#test', data: listdata, autoSort: false, initSort: sortObj, //重点 page: false, skin:'nob' }); } //order_by 10-returned_at 20-used_at 30-created_

layui table 表头与表体内容错位

55555的博客

12-04

5963

问题使用layui渲染table，加载出来的表格表头与表体错位了，但是点击新增重新渲染又能对齐解决查阅了相关资料，有以下几种情况 1、cols中的数据多了一个逗号，导致渲染出现问题，这个问题我检查了并没有多出逗号 2、cols没有定义列宽，给每个列添加宽度：width:80，问题解决 table.render({ elem: '#add_table' //指定原始表格元素选择器（推荐id选择器） // ,height: 500 //容器高度 // ,w

layui多层表头功能实现

魔法在吟歌

10-19

6722

在使用layui创建表格时，需要使用layui中的数据表格多层表头的方法。多层表头是由： colspan和rowspan这个两个参数配合使用。例子：一个学院中的专业信息要包含着专业名称和专业编号。效果图如下：代码：思路：在多层表头写出后，各个的表头位置都是没有在指定位置上，需要依靠colspan和rowspan这个两个参数把各个表头定义好位置。（1）rowspan：行数，可以看到图中的序号，学院名称和操作是占两行的，所以在这三行上写上rowspan：2。专业名称和专业编号是第二层也没给上行

el-tree-table拖拽

最新发布

07-23

`el-tree-table`不是直接存在的组件，这似乎存在一定的混淆。`el-tree-table`并不是Element UI框架中的标准组件。然而，如果你想实现一个树状表格并允许用户通过拖拽操作来进行某些交互，通常需要结合Vue.js和其他相关的库或自定义功能。 ### 实现思路对于动态调整元素顺序的需求，你可以采用以下步骤： #### 使用Vue.js + Vue-TreeTable 或其他类似库虽然不存在 `el-tree-table` 组件，但我们可以通过结合一些可用的库如 `vue-tree-table` 来构建一个支持拖拽功能的树形表格。`vue-tree-table` 是基于 Vue 的一个强大的树形表格组件，它提供了一些基础的功能，但并不直接包含拖拽功能。 **基本步骤包括：** 1. **引入所需依赖** - 安装 `vue-tree-table` 和 Vue.js 及其相关包到你的项目中。 2. **设置数据模型** - 构建一个树结构的数据模型，通常可以是一个递归数组形式，表示层次关系的节点。 3. **使用组件** - 将 `vue-tree-table` 组件插入到 Vue 模板中，并绑定相应的数据。 4. **添加拖拽事件处理** - 需要在组件内部或外部（例如通过第三方插件）添加对元素拖拽事件的监听和响应。 5. **实现拖拽逻辑** - 当元素被拖动时，记录起始位置、目标位置等信息，然后在释放鼠标按钮时根据新位置更新数据结构或视图布局。 6. **更新状态** - 根据拖放操作的结果，刷新或调整树结构，以及对应的前端视图显示。 #### 示例代码概览下面给出一段简化的示例代码片段，说明如何使用 `vue-tree-table` 并添加简单的拖拽功能： ```html <template> <div> <vue-tree-table :data="treeData" :columns="columns"></vue-tree-table> </div> </template> <script> import { VueTreeTable } from 'vue-tree-table-component'; export default { components: { VueTreeTable, }, data() { return { treeData: [ // 初始化树结构数据... ], columns: [ // 定义列属性... ], }; }, methods: { onDragStart(index) { console.log('Drag start', index); // 这里可以实现开始拖动时的操作，比如存储初始位置等。 }, onDrop(index, newIndex) { console.log('Drop at index', newIndex); // 更新数据结构以反映新的位置。 }, }, }; </script> ``` 请注意，这个示例仅展示了基本的结构和概念。实际应用中，你需要更详细地考虑事件处理、数据持久化、用户体验优化等方面的内容。 #### 相关问题: 1. 如何选择最适合项目的拖拽库或工具？ 2. Vue.js 中如何高效管理复杂的数据结构和动态布局？ 3. 在实现拖拽功能时如何考虑到性能优化和用户体验？