vue實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)
更新時(shí)間：2022年03月30日 08:03:17 作者：沖浪選手CHARLIE
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
代碼
組件部分 components/leftTree.vue
<template>
? ? <div>
? ? ? ? <ul class="all-list">
? ? ? ? ? ? <li v-for="(item, i) in list" :key="item.key">
? ? ? ? ? ? <!-- Antd的雙擊功能 這個(gè)看個(gè)人需求，不需要的話把'<div class="tree-item expend></div>'提取出來(lái)就可以了 -->
? ? ? ? ? ? ? <a-dropdown :trigger="['contextmenu']">
? ? ? ? ? ? ? ? <a-menu slot="overlay">
? ? ? ? ? ? ? ? ? <a-menu-item key="1">
? ? ? ? ? ? ? ? ? ? 打開(kāi)文件
? ? ? ? ? ? ? ? ? </a-menu-item>
? ? ? ? ? ? ? ? ? <a-menu-item key="2">
? ? ? ? ? ? ? ? ? ? 新建文件
? ? ? ? ? ? ? ? ? </a-menu-item>
? ? ? ? ? ? ? ? ? <a-menu-item key="3">
? ? ? ? ? ? ? ? ? ? 保存
? ? ? ? ? ? ? ? ? </a-menu-item>
? ? ? ? ? ? ? ? ? <a-menu-item key="4">
? ? ? ? ? ? ? ? ? ? 刪除
? ? ? ? ? ? ? ? ? </a-menu-item>
? ? ? ? ? ? ? ? </a-menu>
? ? ? ? ? ? ? ? <div class="tree-item expend">
? ? ? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? ? ? v-if="item.icon === 'file' || item.icon === 'openfile'"
? ? ? ? ? ? ? ? ? ? ? ? class="icon-size"
? ? ? ? ? ? ? ? ? ? ? ? :class="
? ? ? ? ? ? ? ? ? ? ? ? ? ? openArr.includes(i) ? 'reduce-icon' : 'expend-icon'
? ? ? ? ? ? ? ? ? ? ? ? "
? ? ? ? ? ? ? ? ? ? ? ? @click="toggle(i)"
? ? ? ? ? ? ? ? ? ? ></div>
?
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'file'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/file.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'openfile'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/openfile.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'vue'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/Vue.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'js'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/js.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'react'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/React.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'sass'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/Sass.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? ?<i v-if="item.icon === 'vim'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/vimeo.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? ?<i v-if="item.icon === 'ts'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/ts.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? ?<i v-if="item.icon === 'php'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/php.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'less'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/less.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'java'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/java.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'c++'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/c++.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'markdown'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/markdown.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'py'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/py.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <i v-if="item.icon === 'go'"
? ? ? ? ? ? ? ? ? ? ? ? ><img src="../assets/go.png"
? ? ? ? ? ? ? ? ? ? /></i>
? ? ? ? ? ? ? ? ? ? <span class="content" @click="changeActive(item, i)">{{
? ? ? ? ? ? ? ? ? ? ? ? item.title
? ? ? ? ? ? ? ? ? ? }}</span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? </a-dropdown>
?
? ? ? ? ? ? ? ? <!-- 遞歸 -->
? ? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? ? ? v-show="openArr.includes(i)"
? ? ? ? ? ? ? ? ? ? v-if="item.children && item.children.length"
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <leftTree class="item" :list="item.children"></leftTree>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
</template>
?
<script>
export default {
? ? name: "leftTree",
? ? data() {
? ? ? ? return {
? ? ? ? ? ? openArr: [],
? ? ? ? ? ? checkboxIds: [],
? ? ? ? };
? ? },
? ? props: {
? ? ? ? list: {
? ? ? ? ? ? type: Array,
? ? ? ? },
? ? },
?
? ? methods: {
? ? ? ? toggle(i) {
? ? ? ? ? ? if (this.openArr.includes(i)) {
? ? ? ? ? ? ? ? let index = this.openArr.indexOf(i);
? ? ? ? ? ? ? ? this.openArr.splice(index, 1);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.openArr.push(i);
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? changeActive(item, i) {
? ? ? ? ? ? if (!item.children) {
? ? ? ? ? ? ? ? if (item.icon === "file") {
? ? ? ? ? ? ? ? ? ? this.toggle(i);
? ? ? ? ? ? ? ? ? ? item.icon = "openfile";
? ? ? ? ? ? ? ? } else if (item.icon === "openfile") {
? ? ? ? ? ? ? ? ? ? this.toggle(i);
? ? ? ? ? ? ? ? ? ? item.icon = "file";
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? alert("最后一個(gè)文件");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? if (item.icon === "file") {
? ? ? ? ? ? ? ? ? ? this.toggle(i);
? ? ? ? ? ? ? ? ? ? item.icon = "openfile";
? ? ? ? ? ? ? ? } else if (item.icon === "openfile") {
? ? ? ? ? ? ? ? ? ? this.toggle(i);
? ? ? ? ? ? ? ? ? ? item.icon = "file";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? },
};
</script>
<style lang='less' scoped>
i {
? ? line-height: 0;
? ? img {
? ? ? width: 16px;
? ? ? height: 16px;
? ? }
}
.item {
? ? padding-left: 4px;
}
.bold {
? ? font-weight: bold;
}
ul {
? ? line-height: 1.5em;
? ? list-style-type: none;
? ? white-space: nowrap;
? ? position: relative;
}
li {
? ? list-style-type: none;
? ? padding: 4px;
? ? user-select: none;
}
?
.tree-item {
? ? display: flex;
? ? align-items: center;
}
.expend {
? ? position: relative;
}
?
.expend::before {
? ? content: "";
? ? position: absolute;
? ? width: 6px;
? ? left: 9px;
? ? top: 10px;
? ? border-top: 1px dotted #c3c5c8;
}
?
.all-list::before {
? ? content: "";
? ? position: absolute;
? ? width: 1px;
? ? height: calc(100% - 40px);
? ? left: 48px;
? ? top: 20px;
? ? border-left: 1px dotted #c3c5c8;
}
?
.item .expend::before {
? ? content: "";
? ? position: absolute;
? ? width: 6px;
? ? left: -11px;
? ? top: 10px;
? ? border-top: 1px dotted #c3c5c8;
}
?
.item .all-list::before {
? ? content: "";
? ? position: absolute;
? ? width: 1px;
? ? height: calc(100% - 12px);
? ? left: 20px;
? ? top: 0;
? ? border-left: 1px dotted #c3c5c8;
}
?
.item ul {
? ? padding-left: 2em;
}
?
.content {
? ? padding-left: 4px;
? ? transition: all 0.2s linear;
? ? &:hover {
? ? ? background: #c3c5c8;
? ? }
}
.spacing {
? ? display: inline-block;
? ? width: 18.5px;
? ? height: 1em;
}
.icon-size {
? ? display: inline-block;
? ? width: 16px;
? ? height: 16px;
? ? margin-right: 4px;
}
?
.expend-icon {
? ? background: url("../assets/Plus.png") no-repeat center;
? ? background-size: cover;
? ? width: 9px;
? ? height: 9px;
}
.reduce-icon {
? ? background: url("../assets/minus.png") no-repeat center;
? ? background-size: cover;
? ? width: 9px;
? ? height: 9px;
}
?
.ant-dropdown-menu {
? width: 180px;
? background: #353b44;
? li {
? ? color: #fff;
? ? padding: 2px 10px;
? ? &:hover {
? ? ? background: rgb(13, 89, 175);
? ? }
? }
}
</style>引用區(qū)域 views/home.vue
<template>
? ? <div class="home">
? ? ? ? <tree :list="line" />
? ? </div>
</template>
?
<script>
import tree from "@/components/leftTree.vue";
?
export default {
? ? name: "Home",
? ? components: {
? ? ? ? tree,
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? line: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: "Project",
? ? ? ? ? ? ? ? ? ? type: 1,
? ? ? ? ? ? ? ? ? ? key: "1",
? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.vim",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "1-1",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "vim",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: "Menu",
? ? ? ? ? ? ? ? ? ? type: 1,
? ? ? ? ? ? ? ? ? ? key: "2",
? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: "Components",
? ? ? ? ? ? ? ? ? ? type: 1,
? ? ? ? ? ? ? ? ? ? key: "3",
? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "Index",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 2,
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1",
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.vue",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-1",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "vue",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.react",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-2",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "react",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "js",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 2,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-3",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.js",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-1-1-1",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "js",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.sass",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-4",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "sass",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.less",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-1-5",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "less",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.php",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "3-2",
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "php",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title: "node_modules",
? ? ? ? ? ? ? ? ? ? type: 1,
? ? ? ? ? ? ? ? ? ? key: "4",
? ? ? ? ? ? ? ? ? ? icon: "file",
? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.java",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "4-1",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "java",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.go",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "4-2",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "go",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.py",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "4-3",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "py",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "index.c",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "4-4",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "c++",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: "README.md",
? ? ? ? ? ? ? ? ? ? ? ? ? ? key: "4-5",
? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 3,
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: "markdown",
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ],
? ? ? ? };
? ? },
};
</script>ps: 本人是前端小白，發(fā)帖只是為了做筆記，代碼可能有很多的優(yōu)化空間，另外也希望可以幫助到其他有需要的朋友
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名
這篇文章主要介紹了vue如何實(shí)現(xiàn)對(duì)請(qǐng)求參數(shù)進(jìn)行簽名問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過(guò)實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由
這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue2.x,vue3.x使用provide/inject注入的區(qū)別說(shuō)明
這篇文章主要介紹了vue2.x,vue3.x使用provide/inject注入的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3 中使用vue?img?cutter?圖片裁剪插件的方法
這篇文章主要介紹了vue3 中使用vue?img?cutter?圖片裁剪插件的方法,首先安裝依賴,構(gòu)建 components/ImgCutter.vue 組件,需要的朋友可以參考下2024-05-05
不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹(shù)形控件的案例
這篇文章主要介紹了不依任何賴第三方,單純用vue實(shí)現(xiàn)Tree 樹(shù)形控件的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下2022-12-12
Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
ElementUI Tree 樹(shù)形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹(shù)形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02