ElementUi table组件展示树结构时第一级目录文字对齐

想要实现 类号 列有无子节点，文字都对齐的效果 

使用如下CSS

::v-deep .el-table__row:not([class*="el-table__row--level-0"]) {

    td:nth-child(2) {

    padding-left: 25px !important;

    }

}

代码解析

1. ::v-deep:

• ::v-deep 是 Vue.js 中的一个特殊选择器，用于穿透组件的样式封装（scoped styles）。

• 当使用 scoped 样式时，样式只会应用于当前组件的元素，而不会影响子组件的元素。::v-deep 允许你选择子组件中的元素，从而应用样式。

• .el-table__row:not([class*="el-table__row--level-0"]):

• .el-table__row：这是一个类选择器，表示具有 el-table__row 类的元素，通常是 Element UI 库中表格的行。

• :not([class*="el-table__row--level-0"])：这是一个伪类选择器，表示选择不包含 el-table__row--level-0 类的行。这意味着只有那些不属于第 0 层级的行会被选中。

• td:nth-child(2):

• 这是一个子选择器，表示选择每一行中的第二个单元格（td 元素）。

4. padding-left: 25px !important;:

• padding-left: 25px;：为选中的第二个单元格的左侧添加 25 像素的内边距。

• !important：这是一个 CSS 优先级声明，表示该样式将覆盖任何其他可能影响该元素的样式。使用 !important 应谨慎，因为它会使样式的管理变得更加复杂。

总结

这段代码的作用是：

• 通过 ::v-deep 选择器，强制为所有不属于第 0 层级的表格行的第二个单元格设置左侧内边距为 25 像素。

• 使用 !important 确保这个样式优先级高于其他可能的样式设置。

这通常用于确保表格的布局和样式在特定情况下（如多层级表格）的一致性。