vue樹狀文件夾

⑴ vue如何點擊文件夾展開相應的樹形菜單

最近看了 Vue.js 的遞歸組件，實現了一個最基本的樹形菜單。

項目結構：

main.js 作為入口，很簡單：

?

1234567import Vue from 'vue'Vue.config.debug = trueimport main from './components/main.vue'new Vue({el: '#app',render: h => h(main)})

它引入了一個組件 main.vue：

?

<template><div class="tree-menu"><ul v-for="menuItem in theModel"><my-tree :model="menuItem"></my-tree></ul></div></template><script>var myData = [{'id': '1','menuName': '基礎管理','menuCode': '10','children': [{'menuName': '用戶管理','menuCode': '11'},{'menuName': '角色管理','menuCode': '12','children': [{'menuName': '管理員','menuCode': '121'},{'menuName': 'CEO','menuCode': '122'},{'menuName': 'CFO','menuCode': '123'},{'menuName': 'COO','menuCode': '124'},{'menuName': '普通人','menuCode': '124'}]},{'menuName': '許可權管理','menuCode': '13'}]},{'id': '2','menuName': '商品管理','menuCode': ''},{'id': '3','menuName': '訂單管理','menuCode': '30','children': [{'menuName': '訂單列表','menuCode': '31'},{'menuName': '退貨列表','menuCode': '32','children': []}]},{'id': '4','menuName': '商家管理','menuCode': '','children': []}];import myTree from './common/treeMenu.vue'export default {components: {myTree},data() {return {theModel: myData}}}</script>

該文件引入了樹形組件 treeMenu.vue：

?

<template><li><span @click="toggle"><i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']"></i><i v-if="!isFolder" class="icon file-text"></i>{{ model.menuName }}</span><ul v-show="open" v-if="isFolder"><tree-menu v-for="item in model.children" :model="item"></tree-menu></ul></li></template><script>export default {name: 'treeMenu',props: ['model'],data() {return {open: false,isFolder: true}},computed: {isFolder: function() {return this.model.children && this.model.children.length}},methods: {toggle: function() {if (this.isFolder) {this.open = !this.open}}}}</script><style>ul {list-style: none;}i.icon {display: inline-block;width: 15px;height: 15px;background-repeat: no-repeat;vertical-align: middle;}.icon.folder {background-image: url(/src/assets/folder.png);}.icon.folder-open {background-image: url(/src/assets/folder-open.png);}.icon.file-text {background-image: url(/src/assets/file-text.png);}.tree-menu li {line-height: 1.5;}</style>

就這么簡單。這篇文章還真沒什麼可寫的，權當記錄吧。

截圖效果如下：

⑵ Vue.js怎樣把遞歸組件構建為樹形菜單

Vue.js 遞歸組件實現樹形菜單
main.js 作為入口：

import Vue from 'vue'import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main)})

它引入了一個組件 main.vue：

<template> <div> <my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree> </div></template> <script>const myData = [ { id: '1', menuName: '基礎管理', menuCode: '10' }, { id: '2', menuName: '商品管理', menuCode: '' }, { id: '3', menuName: '訂單管理', menuCode: '30', children: [ { menuName: '訂單列表', menuCode: '31' }, { menuName: '退貨列表', menuCode: '32', children: [] } ] }, { id: '4', menuName: '商家管理', menuCode: '', children: [] }]; const subMenuData1 = { parentId: '1', children: [ { menuName: '用戶管理', menuCode: '11' }, { id: '12', menuName: '角色管理', menuCode: '12', children: [ { menuName: '管理員', menuCode: '121' }, { menuName: 'CEO', menuCode: '122' }, { menuName: 'CFO', menuCode: '123' }, { menuName: 'COO', menuCode: '124' }, { menuName: '普通人', menuCode: '124' } ] }, { menuName: '許可權管理', menuCode: '13' } ]}; const subMenuData2 = { parentId: '2', children: [ { menuName: '商品一', menuCode: '21' }, { id: '22', menuName: '商品二', menuCode: '22', children: [ { menuName: '子類商品1', menuCode: '221' }, { menuName: '子類商品2', menuCode: '222' } ] } ]}; import myTree from './common/treeMenu.vue'export default { components: { myTree }, data () { return { theData: myData, menuName: 'menuName', // 顯示菜單名稱的屬性 loading: false } }, methods: { getSubMenu (menuItem, callback) { this.loading = true; if (menuItem.id === subMenuData1.parentId) { this.loading = false; menuItem.children = subMenuData1.children; callback(menuItem.children); } setTimeout(() => { if (menuItem.id === subMenuData2.parentId) { this.loading = false; menuItem.children = subMenuData2.children; callback(menuItem.children); } }, 2000); } }}</script>

subMenuData1, subMenuData2 存放子菜單數據，可以從伺服器獲取，以實現動態載入。
該文件引入了樹形組件 treeMenu.vue：
<template> <ul class="tree-menu"> <li v-for="(item, index) in data"> <span @click="toggle(item, index)"> <i :class="['icon', item.children && item.children.length ? folderIconList[index] : 'file-text', loading ? loadingIconList[index] : '']"></i> {{ item[name] || item.menuName }} </span> <tree-menu v-if="scope[index]" :data="item.children"></tree-menu> </li> </ul></template> <script>export default { name: 'treeMenu', props: { data: Array, name: String, loading: Boolean }, data () { return { folderIconList: [], loadingIconList: [], scope: {} } }, created () { this.data.forEach((item, index) => { if (item.children && item.children.length) { this.folderIconList[index] = 'folder'; } }); }, methods: { doTask (index) { this.$set(this.scope, index, !this.scope[index]); this.folderIconList[index] = this.scope[index] ? 'folder-open' : 'folder'; }, toggle (item, index) { this.loadingIconList = []; if (item.children && item.children.length) { this.doTask(index); } else { this.loadingIconList[index] = 'loading'; this.$emit('getSubMenu', item, (subMenuList) => { if (subMenuList && subMenuList.length) { this.doTask(index); } }); } } }}</script> <style scoped>.tree-menu { list-style: none;}.tree-menu li { line-height: 2;}.tree-menu li span { cursor: default;}.icon { display: inline-block; width: 15px; height: 15px; background-repeat: no-repeat; vertical-align: -2px;}.icon.folder { background-image: url(/src/assets/folder.png);}.icon.folder-open { background-image: url(/src/assets/folder-open.png);}.icon.file-text { background-image: url(/src/assets/file-text.png);}.icon.loading { background-image: url(/src/assets/loading.gif); background-size: 15px;}</style>

⑶ 樹形控制項如何隱藏vue

具體代碼
<el-tree
:data="data"
ref="tree"
default-expand-all
node-key="id"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
<span>{{ node.label }}</span>
<span>
<el-tooltip v-show="data.show" class="item" effect="dark" content="文字提示" placement="top">
<el-button
type="text"
size="mini"
@click="() => append(data)"
icon="el-icon-plus"
>
</el-button>
</el-tooltip>
<el-dropdown v-show="data.show" @command="handleCommand">
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addFolder">新增文件夾</el-dropdown-item>
<el-dropdown-item command="edit">編輯</el-dropdown-item>
<el-dropdown-item command="delete">刪除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</el-tree>
<script>
export default {
data() {
const data = [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
}]
}, {
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',
}]
}]
return {
defaultProps: {
children: 'children',
label: 'label'
},
data: JSON.parse(JSON.stringify(data))
}
},
methods: {
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
}
}
</script>

⑷ 一般vue項目中的src文件夾下的文件，都有什麼用

這些文件夾本質是一樣的，如果寫得比較規范的話就能從名字中知道相應的功能。
common一般放全局靜態變數或方法
router放路由
filters放過濾器
components放主要的頁面和功能
excel放excel文件
directive放的是一些組件
assets放一些靜態資源或css文件

⑸ 在vue中使用ztree樹形組件，如何將ztree圖片,改成字體圖標呢求解答求思路

使用npm install jquery –save 在項目中安裝ztree依賴文件 jquery;
在index.html裡面引用ztree樣式文件zTreeStyle.css（前面的圖標可以自定義可以參考官網）

3.在項目中引入ztree文件，在main.js中引入

網上給的資料是在這里同時引入jquery；但是項目中引入 報錯

import from『jquery′−在你的zTree.vue單文件中引入importfrom『jquery′−在你的zTree.vue單文件中引入import from 『jquery』
4.在template中創建盒子,一定要給盒子相應的高度

<div class="tree-box" >
<ul id="treeDemo" class="ztree" ></ul>
</div>

5.在 .vue文件中data配置setting 樹，以及定義存放數據的zNodes

6.使用axios 後台請求數據,下圖使用請求方式是封裝好的

ok完成（希望對你有幫助）

⑹ vue圖片文件夾命名img還是images，官方推薦哪個

官方沒有具體推薦，一般放在assets目錄及其子目錄下。
如果圖片不是很多，可以直接放在assets目錄。
對於無需處理的靜態圖片文件可以放在static目錄下。

⑺ vue前端如何實現文件文件夾系統

文件上傳頁面的前端可以選擇使用一些比較好用的上傳組件，例如網路的開源組件WebUploader，澤優軟體的up6，這些組件基本能滿足文件上傳的一些日常所需功能，如非同步上傳文件，文件夾，拖拽式上傳，黏貼上傳，上傳進度監控，文件縮略圖，甚至是大文件斷點續傳，大文件秒傳。
需求：
支持大文件批量上傳（20G）和下載，同時需要保證上傳期間用戶電腦不出現卡死等體驗；
內網百兆網路上傳速度為12MB/S
伺服器內存佔用低
支持文件夾上傳，文件夾中的文件數量達到1萬個以上，且包含層級結構。
支持PC端全平台操作系統，Windows,Linux,Mac
支持文件和文件夾的批量下載，斷點續傳。刷新頁面後繼續傳輸。關閉瀏覽器後保留進度信息。
支持文件夾批量上傳下載，伺服器端保留文件夾層級結構，伺服器端文件夾層級結構與本地相同。

⑻ vue 樹形結構列表 怎麼判斷一級列表還是二級列表

你說的是element-ui框架的el-tree嗎？如果是這個的話，他有兩種方式，一個是直接實用數組data的，直接看數組中的元素就好了。
第二種就是非同步載入的方式，在load函數中，有個參數：node.level, 如果node.level==0那就是一級。

⑼ vue怎樣通過地址打開本地文件夾

<a href="file:///文件目錄地址">打開文件目錄</a>