鍍金池/ 問答/HTML/ elementui tree自定義節(jié)點(diǎn)圖標(biāo)

elementui tree自定義節(jié)點(diǎn)圖標(biāo)

通過css只能定義兩級(jí)節(jié)點(diǎn)圖標(biāo)如下圖
圖片描述

修改方式

clipboard.png

希望能實(shí)現(xiàn)不同節(jié)點(diǎn)顯示不同圖標(biāo)的目的，求指導(dǎo)

回答
編輯回答
墨小白

這個(gè)我看錯(cuò)了，當(dāng)成 NaNmenu了!非常抱歉。

為什么要用background？
直接用i標(biāo)簽就行。

clipboard.png

用iconMoon自定義一下圖標(biāo)，就像這樣定義就行了。

http://element.eleme.io/#/zh-...

2017年7月16日 07:48
編輯回答
骨殘心

可以通過提供的自定義渲染方式來渲染，里面可以自定義任何組件

2017年7月1日 00:40
編輯回答
厭遇

有個(gè)思路你可以參考下，可行的：

  • 通過css把默認(rèn)的三角圖標(biāo)給隱藏掉
  • render-content自定義節(jié)點(diǎn)數(shù)據(jù)。這時(shí)你就可以任意定制你想要的圖標(biāo)
2018年8月1日 07:17
編輯回答
練命
<template>
    <el-tree
        :data="treeData"
        :expand-on-click-node="true"
        class="project-tree"
        unselectable="on"
        :render-content="renderContent"
    >
</template>
<script>
export default{
    methods: {
        renderContent(h, { node, data, store }) {
            return (
              <span class="custom-tree-node">
                <i class={data.className}></i>
                <span style="margin-left:5px;">{node.label}</span>
              </span>
              );
          }
  }
}
<script>
<style>
i{
    display:inline-block;
    background:url("...")
}
</style>

data:

"treeData": [
      {
      "id": 1,
      "label": "haha",
      "className": "first-level",
      "children": [
          {
          "id": 11,
          "label": "hehe",
          "className": "second-level",
          "children": [
                  {
                      "id": 111,
                      "className": "third-level",
                      "label": "heihei"
                  }
              ]
          }
        ]
     }
 ]
2018年4月6日 21:24