深度修改element-ui默认样式的子级样式

修改element-ui Tree 树形控件中的排列

公司需求

1. 原型如图1.1所示
   

2. 排列要求
   第三级树需要横向排列

找出对应的类或者样式

1. element-ui
   因为element-ui已封装好树形控件组件，在使用时只能在开发者模式下查看到类(class)，而在组件使用的地方只能看到标签类，如图1.2所示
   

深度修改(在scss中修改，使用::v-deep)

1.一般做法
在标签类下指定某元素

.el-tree {
::v-deep .class {

  }

}

由于树形结构是多层级样式，每一级基本相同，这样导致所有的层级都会进行排列如图1.3 （不符合需求）

2. 正确做法
指定对应层级的样式
.el-tree {
::v-deep .class .class {

  }

}

图中相同的样式指不同层级的相同样式 开发者工具定位到多少级就写多少个 (定位到第几级得通过开发者工具进行查看如图1.4)

图中显示得el-tree标签类下面的两个子级样式，第二级正是原型中要求横向排列的树如图1.5