記錄一次關於el-tree中讓內容與左邊有距離的爬坑記錄

首先看設計文稿如下

 

 

 可以看到tree的內容與左邊有一個88px的間距，起初看到覺得很容易，給容器加一個padding-left: 88px就可以了。可是似乎並沒那么簡單。。。

/deep/.el-tree-node__content {
  padding-left: 88px !important;
}

看看結果

 

 

 

似乎是對的，但是注意，這張圖中所有父子節點與左邊的內容都是88px，這是因為el-tree組件中有一個屬性叫indent，表示縮進距離，默認為16px。其實也就是在這個el-node-tree__conent中加了一個padding-left:16px的屬性，而我自己寫的恰好覆蓋了這個默認縮進，因此所有節點都為88px。看來這種方法不行，但是我注意到indent這個屬性，那我直接加上這個屬性是否就可以了呢？於是我試了下

 

 

 

還是不行，它表示的僅僅是縮進的距離，也就是每個子節點對應父節點產生的左間距。

接下來我又試着在整個容器中加入左間距試試

.el-tree{
  padding-left: 88px
}

 

 

 

 

可以看到間距是有了，但是呢鼠標移動到內容上時，左邊因為空出了一個88px的距離，感覺十分丑，然后我就圍繞這方面想是否能夠讓這個移動的內容的div浮動起來，結果依然不行。

后來我想了一下，因為我的文本是通過動態綁定形式渲染的，那么我就試着將內容與左邊產生間距，

<div
              slot-scope="{ node, data }"
              @mouseenter="mouseenter(data)"
              @mouseleave="mouseleave(data)"
              style="font-size: 1rem; width: 100%; display: flex; align-items: center; padding-left: 88px"
            >
            
              
              <i
                :class="{
                  'fa fa-folder': !node.expanded,
                  'fa fa-folder-open': node.expanded,
                }"
                style="color: #1672FA; padding-left: 4px"
              />
              <span style="padding-left: 8px">{{ data.descr }} </span>
              <span style="margin-left: auto; margin-right: 29px"
                ><i v-show="data.show" @click="deleteDept(data.deptid)" class="el-icon-close"
              /></span>
            </div>

結果....

 

 

前面的小箭頭卻沒有跟着一起移動。。。因為箭頭並不是動態渲染的。但是可以看到鼠標移動上去時，可以有整行的高亮效果，我感覺抓住了方向，

接下來說重點。

思路：既然內容是可以產生右邊間距的，雖然左邊的小箭頭不會跟過來，但是這個箭頭可以跟着動態生成就行了。

我看了下el-tree點擊的事件，是通過綁定aria-expanded="true"這個事件控制小箭頭切換的方向，也就是展開時向下，閉合時向右。

ok，這就很好理解了，我也需要通過一個這樣的屬性判斷該節點是否展開。恰好綁定的node中有一個叫expanded是判斷是否展開的。(其實做文件夾圖標狀態時已經用過，這會大腦短路)

那就很容易了，

<span
                :class="{
                  'expanded el-tree-node__expand-icon el-icon-caret-right': node.expanded,
                  'el-tree-node__expand-icon el-icon-caret-right': !node.expanded,
                }"
              ></span>

看下效果

 

 

現在我就只需要去掉前面的小箭頭即可。只需將el-tree中icon-class設置為空即可。

icon-class="''"

 

 

但是這里出了一個問題，當該節點下面不存在子節點時候，依舊會顯示出一個箭頭，這個問題也很簡單我只需要加入判斷，該節點下是否還有子節點，有則顯示箭頭，否則隱藏。

v-if="data.child.length!==0"

然后看下效果

 

 ok，箭頭終於去掉了，大功告成！

有點亂，整理下思路：

1.在動態渲染的內容中加入左間距，此時會發現箭頭與文本內容有一個88px的間距，我們先不管它。

2.通過node.expanded判斷當前節點是展開還是閉合，綁定箭頭對應的圖標生成我們自己的箭頭。

3.去掉el-tree組件自帶的箭頭。

4.判斷該節點下是否還存在子節點，存在才顯示箭頭，否則不顯示。

貼上完整的代碼

<el-tree
            :highlight-current="true"
            :data="deptList"
            :props="defaultProps"
            @node-click="handleNodeClick"
            style="margin-top: 8px"
            v-loading="loading"
            node-key="deptid"
            :default-expanded-keys="['100000']"
            icon-class="''"
          >
            <div
              slot-scope="{ node, data }"
              @mouseenter="mouseenter(data)"
              @mouseleave="mouseleave(data)"
              style="font-size: 1rem; width: 100%; display: flex; align-items: center; padding-left: 88px"
            >
            
              <span
              v-if="data.child.length!==0"
                :class="{
                  'expanded el-tree-node__expand-icon el-icon-caret-right': node.expanded,
                  'el-tree-node__expand-icon el-icon-caret-right': !node.expanded,
                }"
              ></span>
              <i
                :class="{
                  'fa fa-folder': !node.expanded,
                  'fa fa-folder-open': node.expanded,
                }"
                style="color: #1672FA; padding-left: 4px"
              />
              <span style="padding-left: 8px">{{ data.descr }} </span>
              <span style="margin-left: auto; margin-right: 29px"
                ><i v-show="data.show" @click="deleteDept(data.deptid)" class="el-icon-close"
              /></span>
            </div>
          </el-tree>

 如果有更好的思路歡迎提出~~