el-tree 餓了麼樹狀控件自定義節點的顯示圖示

• 效果展示
• 實作代碼
• • 替換小三角為圖示

效果展示

el-tree元件預設顯示時，節點是不帶icon的，如需使用時，可以通過自定義插槽的方式來實作，實作方式在網絡上也存在很多，本篇隻簡單記錄個人如何實作。

功能點：

• 替換預設顯示的小三角圖示
• 展開即關閉節點時圖示切換
• 子節點的預設顯示圖示

實作代碼

<template>
  <div class="tree">
    <el-tree
      :data="data5"
      node-key="id"
      default-expand-all
      @node-expand="handlerNodeExpand"
      show-checkbox
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <!-- <i :class="data.icon"></i> -->
          <i
            v-if="data.children.length!==0"
            :class="[
            node.expanded ? 'el-icon-folder-remove': 'el-icon-folder-add'
          ]"
          ></i>
          <i v-if="data.children.length===0" class="el-icon-document"></i>
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'customIconTree',
  data () {
    return {
      data5: [{
        id: 1,
        label: '一級節點 1',
        icon: 'el-icon-success',
        children: [{
          id: 4,
          label: '二級節點 1-1',
          icon: 'el-icon-folder-add',
          children: [{
            id: 9,
            label: '三級節點 1-1-1',
            icon: 'el-icon-info',
            children: [
              {
                id: 13,
                label: '三級節點 1-1-1-1',
                children: []
              }
            ]
          }, {
            id: 10,
            label: '三級節點 1-1-2',
            children: []
          }]
        }]
      },
      {
        id: 2,
        label: '一級節點 2',
        children: [{
          id: 5,
          label: '二級節點 2-1',
          children: []
        }, {
          id: 6,
          label: '二級節點 2-2',
          children: []
        }]
      },
      {
        id: 3,
        label: '一級節點 3',
        children: [{
          id: 7,
          label: '二級節點 3-1',
          children: []
        }, {
          id: 8,
          label: '二級節點 3-2',
          children: []
        }]
      },
      {
        id: 12,
        label: '一級節點-4',
        children: []
      }
      ],
      expandNodes: false
    }
  },
  methods: {
    handlerNodeExpand (data, node, element) {
      window.console.log(data)
      window.console.log(node)
      window.console.log(element)
    }
  }

}
</script>

<style scoped>
.tree >>> .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree >>> .el-icon-caret-right:before {
  content: "\e6d9";
  color: white;
  background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\e6d8";
  color: white;
  background-color: #dcdfe6;
}
.tree >>> .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
  background-color: transparent;
}
.tree >>> .el-tree-node__content > label.el-checkbox {
  margin-bottom: 2px;
}
</style>

           

實作解釋：

通過自定義插槽的方式，在資料渲染時添加i标簽，進而顯示圖示

通過el-tree通過的節點展開時間，在控制台輸出data、node、element後可以觀察發現，當點選展開節點時，node中存在一個expanded參數且值為 true：

考慮到元件封裝，如果在style中将圖示寫死，若是想改變圖示，勢必會影響其他地方的顯示，故綁定了icon容器span 的class屬性，通過node.expanded屬性來動态的改變icon的class屬性，後續隻需将目前寫的class替換為屬性，供使用者使用時按自己的需求進行綁定即可。

替換小三角為圖示

将預設的小三角圖示替換為自己需要的圖表，這裡使用的是style的方式，通過控制台檢視element，找到所在的元素，然後為其設定css樣式，具體參見上述完整代碼。

  tips:

   點滴記錄，彙聚江河