在使用element-ui 框架做vue 項目樹結構時稚瘾，發(fā)現(xiàn)需要固定樹結構的寬度计呈，而且樹結構的字段有可能會特別長掌挚，一行根本無法顯示雨席，加長又會影響展示效果，div 的寬度固定吠式，寫了樣式覆蓋掉el-tree 內(nèi)部的結構
圖片.png
<el-col :span="4" style="border-right: 1px solid #e5e5e5;" class="tree">
<el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
<template slot-scope="{ node, data }">
<div style="font-size:12px;">
<span class="overflow-x: auto"> {{ node.label }}</span>
<el-button type="text" size="mini" @click="() => append(data)">
加入
</el-button>
</div>
</template>
</el-tree>
</el-col>
el-tree 組件外部加個div 添加class="tree", 這里我使用el-row el-col 布局,沒有使用div陡厘，可以根據(jù)自己的需要進行修改
<style lang="scss">
.tree {
.el-tree-node {
white-space: normal;
.el-tree-node__content {
height: 100%;
align-items: start;
}
}
}
</style>
樣式使用了sass,如果你沒用到這個包，可以都拿出來寫特占，注意style 不要加scoped,會不生效糙置。樣式覆蓋之后的效果，就是展開收縮的地方有點小瑕疵是目，可以自己修改谤饭。
圖片.png
