vue如何在引入的el-tree前添加圖標(biāo)

更新時間：2024年03月19日 08:44:50 作者：毅爭晨夕

這篇文章主要介紹了vue如何在引入的el-tree前添加圖標(biāo)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue引入的el-tree前添加圖標(biāo)

根據(jù)有沒有子節(jié)點來顯示前面是文件夾還是文件的圖標(biāo) （因為遇到了就記錄了下來）

如果有子節(jié)點(children)，就在前面加上一個文件夾的圖標(biāo)(片)，如果沒有子節(jié)點，就顯示的是文件的圖標(biāo)(片)

只有部分代碼，在要push的地方添加一個icon，然后動態(tài)綁定這個icon，注意名字要一樣；

<template>
 <div>
  <el-tree
      ref="addre"
      :load="loNo"
      :props="default-props"
      lazy
      node-key="id"
      show-checkbox
      :check-strictly="true"
       @check="heiChange"
      highlight-current
      :key="this.sho"
   >  
     <span class="custom-tree-node" slot-scope="{ node, data }">
        <span  v-if="data.label"  :class="folder">{{ `(${data.label})` }}</span>  
        <span  v-if="!data.label"  :class="data.icon"></span>    //注意此處是動態(tài)的綁定下面 push進去定義好的icon名稱；
        <span>{{ node.label }}</span>
      </span>
  </el-tree>
 </div>
</template>

<script>
  export default {
     data() {
       return {
         folder:'iconFolder',    //顯示文件夾  下面有css樣式
         file:'iconFile',        //顯示文件    下面有css樣式
       };
     }，
     methods：{      //省略的點點不重要，
       loNo(aa,bb){
          var data = []
           //....
          if (res.folders) {
              //....
                 data.push({
                    //....
                    icon:this.folder    //在這里追加個icon就行了，然后調(diào)上面data里的名稱
                 })
               //....
           }，
          if (res.files) {
              //....
                 data.push({
                    //....
                    icon:this.files     //在這里追加個icon就行了，然后調(diào)上面data里的名稱
                 })
               //....
           }，
       }
     }
  };
</script>

//樣式
<style scoped>
 .iconFolder::before{                 //樣式名稱與data里的對應(yīng)
  /* background-color: aqua; */
  content:'';
  /* float: left; */
  display: inline-block;
  width: 15px;
  height: 15px;
  /* border: 1px solid#000; */
  background: url(../../assets/img/wenjianjia.png) no-repeat;
  background-size: 15px;
}
.iconFile::before{                    //樣式名稱與data里的對應(yīng)
  /* background-color: aqua; */
  content:'';
  /* float: left; */
  display: inline-block;
  width: 15px;
  height: 15px;
  /* border: 1px solid#000; */
  background: url(../../assets/img/wenjian.png) no-repeat;
  background-size: 15px;
}
</style>

還有一個方法我在看其他內(nèi)容發(fā)現(xiàn)，也是在span標(biāo)簽里套用了倆個img標(biāo)簽進行判斷他們children的長度，如果大于0，就顯示這個圖片，不用再push里添加icon了，因為用的是img標(biāo)簽，所以圖片直接放在了img上的src里了，就不用在這寫css了。

ElementUI el-tree樹形控件給節(jié)點添加圖標(biāo)

<template>
    <div class="tree">     
    
    <el-tree :data="data5" node-key="id" default-expand-all >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"></i>{{ node.label }}
            </span>              
        </span>
    </el-tree>
 
    </div>
</template>

<script>
    export default {
        data () {
            return {
                 data5: [{
                    id: 1,
                    label: '一級 1',
                    icon:'el-icon-success',
                    children: [{
                        id: 4,
                        label: '二級 1-1',
                        children: [{
                            id: 9,
                            label: '三級 1-1-1',
                            icon: 'el-icon-info'
                        }, {
                            id: 10,
                            label: '三級 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一級 2',
                    children: [{
                        id: 5,
                        label: '二級 2-1',
                    }, {
                        id: 6,
                        label: '二級 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一級 3',
                    children: [{
                        id: 7,
                        label: '二級 3-1'
                    }, {
                        id: 8,
                        label: '二級 3-2'
                    }]
                }]
            }
        }
    
    }
</script>
 
<style scoped>
 
</style>