elementui el-tree组件怎么设置左边距？

Question

我最近在使用el-tree组件开发，发现一部分样式没有达到要求，列如el-tree的第一个label是挨着左边的（如图一所示），太近了！非常难看，我需要距离左边20px距离，发现el-tree的padding-left都是js生成的，没法改。那么怎么修改这个padding-left呢？需要达到图二的样式要求。

Answer 1

修改custom-tree-node这个类名就可以了

<span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>
                            {{ node.label }}
                            <i :class="data.icon"></i>
                        </span>
                        </span>

Answer 2

暴力方法：直接强制改css

在css里找到相应的类名强制修改，如果当<style>标签有scoped属性时,需要用到深度作用选择器

<style scoped\> .a >>> .b { /\* ... \*/ } </style\>

上述代码将会编译成：

.a\[data-v-f3f3eg9\]  .b { /\* ... \*/ }

如果是使用的是scss或less预处理器无法解析 >>>，这种情况你可以使用/deep/操作符取代

Answer 3

https://codepen.io/qk_/pen/zY...
是这样的效果么

Answer 4

hello 我也碰到一样的需求了 救救孩子吧 楼主🤣

Answer 5

配置indent即可，另外首项的左边距和整体的右边距可以配置下图即可。
.el-tree .el-tree-node__content {

border-left: "左边距"px solid transparent;
border-right: "右边距"px solid transparent;

}