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组件 树形数据不对齐的解决方案 的相关文章

  • 生产环境的域名地址与后端给的接口地址不一样时的配置(vue)

    1 找到 config dev env js 文件 module exports merge prodEnv NODE ENV development API ROOT http com 本地开发时用的域名 2 找到 config prod
  • vue:实现锚点双向滚动/文章章节联动滚动效果

    文章目录 需求描述 实现思路 示例代码 参考网址 需求描述 需要实现类似doc中文档大纲的效果 点击对应章节的名称时定位到相应的正文 而当正文滚动时 高亮显示对应的章节名称 实现思路 其实笔者一开始想到的是利用a标签页内跳转 也就是 锚点
  • Vue + Element UI 前端篇(十一):第三方图标库

    Vue Element UI 实现权限管理系统 前端篇 十一 第三方图标库 使用第三方图标库 用过Elment的同鞋都知道 Element UI提供的字体图符少之又少 实在是不够用啊 幸好现在有不少丰富的第三方图标库可用 引入也不会很麻烦
  • Vue2运行报错SyntaxError: Cannot use import statement outside a module

    问题描述 像配置vue3那样配置vue config js的路径代理 代替src后 报错 语法错误 不能在模块外部使用导入语句 原因 模块语法一个是CommonJS module 一个是 ES6 module vue config js里的
  • Vue 组件化

    什么是组件化 任何一个人处理信息的逻辑能力都是有限的 所以 当面对一个非常复杂的问题时 我们不太可能一次性搞定一大堆的内容 但是 我们人有一种天生的能力 就是将问题进行拆解 如果将一个复杂的问题 拆分成很多个可以处理的小问题 再将其放在整体
  • Vue中的import from

    Vue中的import from 大家都知道 import from 是用来引入一些文件的 在vue中 可能有 js文件 json文件 vue文件 在JS和JSON文件引入的时候 往往需要写入一些 例如数组 export const a 例
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac
  • vue-lazyload基础实例(基于vue2.0和vue-router2.0)

    首先引入依赖 import Vue from vue import Router from vue router import VueLazyload from vue lazyload 配置vue lazyload Vue use Vue
  • 8.全配置自动生成模块前后端

    文章目录 学习资料 配置式开发全新的模块 快速实现 字典管理 代码生成器详细属性设置 全智能模块开发 查询调整 多表连接 药品模块 生产厂家下拉框 学习资料 https www bilibili com video BV13g411Y7GS
  • vue 子父组件间的那些事儿——搭建项目(一)

    一 搭建vue项目 1 环境准备 基于nodejs vue cli cnpm 搭建vue项目 由于本博主已经具备以上环境 现在直接进行项目搭建 环境准备可参考这篇博客 https blog csdn net xcymorningsun ar
  • vue element select下拉框树形多选

    components 文件下新建 SelectTree文件 index vue SelectTree index vue
  • vue——vue-video-player插件实现rtmp直播流

    更新 flash已不可再使用 大家另寻出路吧 安装前首先需要注意几个点 vue video player插件 其实就是 video js 集成到 vue 中 所以千万不要再安装 video js 可能会出错 视频流我这个项目选择rtmp格式
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • 基于vue2+海康威视web开发包3.2 无插件版本开发的监控系统

    文章目录 前言 一 插件准备 二 使用步骤 前言 项目最终效果为 可以预览 并且可以使用云台控制 购买的海康威视摄像头必须可以开启websocket 一 插件准备 插件下载地址 下载WEB无插件开发包V3 2 并加入到vue项目中 下载后解
  • 【vue】$bus 跨组件调用方法

    1 新建bus js import Vue from vue 使用 Event Bus const bus new Vue export default bus 2 main js引用 import bus from libs bus Vu
  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果
  • 基于springboot+vue实现位置的多分馆图书馆推荐系统演示【附项目源码+论文说明】

    基于springboot实现位置的多分馆图书馆推荐系统演示 摘要 时代的变化速度实在超出人类的所料 21世纪 计算机已经发展到各行各业 各个地区 它的载体媒介 计算机 大众称之为的电脑 是一种特高速的科学仪器 比人类的脑袋要灵光无数倍 什么
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • Vue3 和Vue2的区别,以及钩子函数的使用

    Vue js 3 和 Vue js 2 是两个主要版本的流行前端框架 它们之间有很多区别 包括性能优化 新特性和改进的API等 以下是一些Vue 3与Vue 2之间的主要区别 以及一些示例代码来说明这些差异 1 性能优化 响应式系统 Vue

随机推荐

  • 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 先看默认效果 效果图