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>