【elementUI】el-table树形结构样式修改-gif展示说明 按要求自取即可(1)

3. 对齐不含子目录的所有一级目录

4. 去掉小图标的旋转效果

5. 修改展开之后的图标

---

1.直接使用element-ui原始效果

2. 修改图标 > 为 +

// 修改图标

::v-deep .el-icon-arrow-right:before {

// content: “+”;

color: #1890ff;

font-size: 20px;

font-weight: 700px;

}

::v-deep .el-table__expand-icon .el-icon-arrow-right:before {

content: “+”;

}

当然element-ui还提供了很多其他的图标可以选择 只需要修改对应的content就可以。

3. 对齐不含子目录的所有一级目录

// el-table表格对齐

::v-deep .el-table__row:not([class*=“el-table__row–level-”]) {

td:first-child {

padding-left: 24px !important;

}

}

如果没有效果的话