在使用element-ui 框架做vue 项目树结构时,发现需要固定树结构的宽度,而且树结构的字段有可能会特别长,一行根本无法显示,加长又会影响展示效果,div 的宽度固定,写了样式覆盖掉el-tree 内部的结构
图片.png
{{ node.label }}
append(data)">
加入
el-tree 组件外部加个div 添加class="tree", 这里我使用el-row el-col 布局,没有使用div,可以根据自己的需要进行修改
.tree {
.el-tree-node {
white-space: normal;
.el-tree-node__content {
height: 100%;
align-items: start;
}
}
}
样式使用了sass,如果你没用到这个包,可以都拿出来写,注意style 不要加scoped,会不生效。样式覆盖之后的效果,就是展开收缩的地方有点小瑕疵,可以自己修改。
图片.png