在使用element-ui 框架做vue 項(xiàng)目樹結(jié)構(gòu)時，發(fā)現(xiàn)需要固定樹結(jié)構(gòu)的寬度，而且樹結(jié)構(gòu)的字段有可能會特別長，一行根本無法顯示，加長又會影響展示效果，div 的寬度固定，寫了樣式覆蓋掉el-tree 內(nèi)部的結(jié)構(gòu)

圖片.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ù)自己的需要進(jìn)行修改

<style lang="scss">
.tree {
  .el-tree-node {
    white-space: normal;
    .el-tree-node__content {
      height: 100%;
      align-items: start;
    }
  }
}
</style>

樣式使用了sass,如果你沒用到這個包，可以都拿出來寫，注意style 不要加scoped,會不生效。樣式覆蓋之后的效果，就是展開收縮的地方有點(diǎn)小瑕疵，可以自己修改。

圖片.png