ElementUI el-table组件 树形数据不对齐的解决方案

2023-11-12

ElementPlus的el-table组件在展示树状数据时,左侧的展开小箭头在部分情况下会导致第一列数据起始位置不对齐,添加一段css即可解决。

环境:Vue3.0 + Element-Plus 1.0.2-beta.55

先看默认效果,效果图如下:

以下是修改后效果:

只需要添加一段css即可完成如上效果:

<style lang="less" scoped>
// 对齐根节点 无论有无子节点
::v-deep(.el-table__row:not([class*='el-table__row--level-'])) {
  td:first-child {
    padding-left: 24px;
  }
}
</style>

已测试多级(我测试到了四级树形结构数据)无异常情况。

但由于ElementPlus版本更迭情况,不保证后续不会出现问题,有问题可以评论告知。

需要注意的是,使用::v-deep()样式穿透来覆盖element-ui内部样式。

由于我这里使用的是Vue3.0 + ElementPlus环境,v-deep需要根据你的环境来修改,如/deep/等。

若想全局生效,在没有scoped修饰符的全局样式表文件中添加该代码即可。

在多级数据的情景下如下图所示:

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElementUI el-table组件 树形数据不对齐的解决方案 的相关文章

  • 继承和多态的内存图解

    今天被继承和多态困扰 在CSDN上找了好几个内存分配讲解 个人感觉不全吧 就把他们做了个整合 讲解的是多态的方法和成员调用和继承中的方法和变量的调用 什么是多态 同一个对象 在不同时刻表现出来的不同形态 多态的前提 要有继承或实现关系要有方

随机推荐

  • web robotframework xpath元素定位

    1 定位购买按钮 在这里 我写的是 td class text center button class ng isolate scope span text 购买 提示找不到元素 原因是button的class值 我把他改成class bt
  • 调试osgEarth(七)地图map图层的构建过程-添加layer(4)--打开ImageLayer

    继续调试 创建空影像 建了个1x1x1的空图片 这个也比较简单 ImageLayer建立了一个1x1x1的空图片
  • spring boot 2.x 应用可视化监控

    来源 简书 内容 应用可视化监控 prometheus grafana https www jianshu com p 7ecb57a3f326 修改为spring boot 2 0时 1 首先 添加依赖如下依赖
  • E: Unable to locate package kubelet 解决

    昨天搭建k8s集群环境时 安装报错 显示无法找到 1 打开vim etc apt sources list 写入阿里云的源 deb https mirrors aliyun com kubernetes apt kubernetes xen
  • aiVMS----CentOS7.6安装RabbitMQ安装

    entOS7 6安装RabbitMQ安装 安装一 快速的安装方法是使用Package Cloud提供的脚本 Package Cloud也可以用于通过yum安装最新的Erlang版本 使用PackageCloud安装RabbitMQ 官网参考
  • table问题总结

    前景 最近开发需要原生table 之前使用很少用 了解比较少 这次对于样式和功能要求也比较高 对与遇到的问题做下总结和分享 问题与解决方案 行高不定问题 描述 表格每一行的高度不确定 会自动适配 设置行高和高度均无效 产生原因 表格设置了固
  • R语言用ROCR包出现载入程辑包:‘gplots’ The following object is masked from ‘package:stats’错误

    谢谢点进来 如果你觉得有帮助 麻烦点个赞 假如在R studio运行的代码是这样的 library ROCR 首先看到这个问题的时候 我认为没有安装gplots包 可以按下图所示看是否有该包 如果没有则点击install输入包名安装 奇怪的
  • Ledger of Harms

    Under immense pressure to prioritize engagement and growth technology platforms have created a race for human attention
  • JavaScript快速排序算法

  • C#单线程和多线程端口扫描器

    C 单线程和多线程端口扫描器 一 项目创建以及页面设计 一 项目新建 二 页面设计 二 单线程实现端口扫描 一 代码实现 二 运行结果 三 多线程实现端口扫描 一 程序实现 二 运行结果 四 总结 五 参考资料 一 项目创建以及页面设计 一
  • JCenter下载太慢?教你修改Maven仓库地址为国内镜像

    转载自 http www yrom net blog 2015 02 07 change gradle maven repo url 近来迁移了一些项目到Android Studio 采用Gradle构建确实比原来的Ant方便许多 但是编译
  • StyleCLIP学习笔记

    https github com orpatashnik StyleCLIP The main inferece script is placed in mapper scripts inference py Inference argum
  • 安装librocksdb.so.4.1的共享库

    安装librocksdb so 4 1的共享库 注 以下命令需在root模式下进行 1 clone rocksDB 命令行运行git clone https github com facebook rocksdb git 2 切换到4 1
  • Java调试原理初探

    对于所有程序员 程序调试是一项必备的技能 在java程序中 最简单的就是通过 System out println 来打印输出各种变量来发现问题 而用的最多的莫过于通过各种调试器来进行调试 如图一所示的eclipse调试器 甚至还可以进行远
  • 微信号正则校验

    由于最近有朋友做微信开发 让我帮其找一个微信号正则校验 代码 本来以为网上会有很多 但一搜才发现 没有一个可用的校验微信号的正则 所以只好自己写一个了 废话不多说 直接贴结果 首先我们要明确微信号规则 微信账号仅支持6 20个字母 数字 下
  • linux内核分析笔记----内核同步

    内核同步讲的比较多了 我也就不太啰嗦了 先说一些概念 然后就是方法 同步就是避免并发和防止竞争条件 有关临界区的例子我就不举了 随便一本操作系统的书上都有 锁机制的提出也算解决了一些问题 我们待会再说 现在只要知道锁的使用是自愿的 非强制的
  • 【机器学习】鸢尾花Iris数据集进行线性分类

    目录 一 实验准备 二 线性分类 1 原始数据 2 训练模型 3 绘制决策边界 4 设置参数C 三 鸢尾花数据集分类 1 取萼片的长宽作特征分类 2 取花瓣的长宽作特征分类 四 参考 一 实验准备 安装python3 6 3 7 Anaco
  • crypto++加密算法库的编译和在项目中的使用

    简述 Crypto Library是一个免费的C 类加密方案库 该库包含以下算法 算法 名称 认证的加密方案 GCM CCM EAX 高速流密码 ChaCha 8 12 20 Panama Sosemanuk Salsa20 8 12 20
  • QT Modbus RTU调试助手(包含算法实现CRC MODBUS16校验)

    QT Modbus RTU调试助手 在类构造函数中将UI初始化和串口对象定义以及查找串口 串口设置 串口接受 QT延时函数 CRC校验 发送串口数据函数 总结 在类构造函数中将UI初始化和串口对象定义以及查找串口 foreach const
  • ElementUI el-table组件 树形数据不对齐的解决方案

    ElementPlus的el table组件在展示树状数据时 左侧的展开小箭头在部分情况下会导致第一列数据起始位置不对齐 添加一段css即可解决 环境 Vue3 0 Element Plus 1 0 2 beta 55 先看默认效果 效果图