vue横向树结构_Vue 递归实现树形结构
结果展示
先给出两张效果图,左侧是百度Echarts的文档中心截图,右侧是我个人结合项目中文档中心截图
项目中假设为后台管理系统,一般左侧导航都是树形递归,当然现在也有很多的UI框架,随便套一下也是可以用的;
楼主这里要总结的是vue组件化的时候,当前树形结构组件自行调用;
仅供项目总结,如有不对的地方,请多多包涵。
代码结构
mTree.vue
:class="{'active':model.path === this.$route.params.filePath}">
@click="toggle(model)"
:class="{'item-hover': model.type === 'file'}">
{{ model.name }}
class="item-icon"
:class="{'openmenu': open}"
v-if="model.type !== 'file'">
export default {
name: 'mTree',
props: ['model', 'index'],
data() {
return {
open: true
}
},
methods: {
toggle: function (model) {
let self = this;
if (model.type === "directory") {
this.open = !this.open;
} else {
console.log('file');
}
}
}
}
.tree-items {
margin: 8px 0 0 0;
padding: 3px;
color: #575d6f;
border-radius: 5px;
cursor: pointer;
user-select: none;
&.active {
.item-title {
color: #1357ba;
}
}
&.onHitClass {
background-color: #dbdce0;
}
.item-title {
line-height: 1px;
font-size: 16px;
font-weight: bold;
color: #575d6f;
&.item-hover {
&:hover {
color: #1357ba;
}
}
}
.item-icon {
display: inline-block;
transform: rotate(-180deg);
margin-left: 12px;
width: 7px;
height: 7px;
background: url('三角形的图片.png') no-repeat center;
transition: all .3s;
&.openmenu {
transform: rotate(0deg);
}
}
.child-list-box {
padding-left: 17px;
.tree-items {
margin: 5px 0;
color: #666;
text-decoration: none;
display: block;
font-weight: 300;
padding: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.item-title {
font-size: 14px;
margin-bottom: 12px;
font-weight: normal;
}
}
}
}
mDemo.vue
import MTree from "./mTree.vue";
let data = [{
"type": "file",
"name": "前端框架",
"path": "about"
}, {
"type": "file",
"name": "前端框架",
"path": "guide"
}, {
"type": "file",
"name": "前端框架",
"path": "zip-guide"
}, {
"type": "file",
"name": "UI模块引擎",
"path": "remote-debugging"
},
{
"type": "directory",
"name": "云API",
"files": [{
"type": "file",
"name": "数据云API",
"path": "component-album"
}, {
"type": "file",
"name": "数据云API",
"path": "component-app"
}]
}
]
let fileFrist = [];
function showFristFile(data) {
for (let i in data) {
let fileModel = data[i];
if (fileModel.type === "file") {
fileFrist.push(fileModel);
} else {
showFristFile(fileModel.files);
}
}
return fileFrist;
}
export default {
data(){
return {
treeModel: data,
retrievalWords: showFristFile(data),
keywords:''
}
},
components: {
MTree
},
methods:{
searchKeywords() {
let self = this;
let retrievalWords = self.retrievalWords;
let keywords = self.keywords;
if (!keywords) {
self.treeModel= self.treeModel;
} else {
let arrKeywords = [];
for (let i = 0; i < retrievalWords.length; i++) {
if (retrievalWords[i].name.toLowerCase().indexOf(keywords.toLowerCase()) !== -1) {
arrKeywords.push(retrievalWords[i]);
}
}
self.treeModel = arrKeywords;
}
}
}
}
总结
整理的有点杂乱,有空重新整理一下,并且贴出完整的代码
项目总结,请多多包涵。
vue横向树结构_Vue 递归实现树形结构相关推荐
- vue横向树结构_vue树形结构的实现
1. 主要代码 使用单文件组件的方式, 需要一个父组件treeMenu, 和子组件treeItem 1.1 父组件treeMenu.vue :nodes="treeData"> ...
- Java8新特性-使用Stream流来实现递归遍历树形结构(案例)
Java8新特性-Stream流 可能平常会遇到一些需求,比如构建菜单,构建树形结构,数据库一般就使用父id来表示,为了降低数据库的查询压力,我们可以使用Java8中的Stream流一次性把数据查出来 ...
- 利用Stram来递归生成树形结构
利用Stram来递归生成树形结构 当需要查询有子菜单,或者子部门这一类需要形成树形的数据时,我们可以使用stream流式编程写 实体类 实体类需要有一个子列,类似此处的子城市 @Data @Equal ...
- java arraylist 遍历树_Java递归遍历树形结构
废话不多说了,直接给大家贴代码,具体代码如下所示://菜单树形结构 public JSONArray treeMenuList(JSONArray menuList, int parentId) { ...
- Vue 递归实现树形结构
2019独角兽企业重金招聘Python工程师标准>>> 结果展示 先给出两张效果图,左侧是百度Echarts的文档中心截图,右侧是我个人结合项目中文档中心截图 项目中假设为后台管理系 ...
- vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
- java—stream流递归实现树形结构
一.在项目开发中,经常会遇到像菜单式的页面,如下图 数据表结构一般像一个树形结构一样 对应的Model体 @Data //代替get.set方法 @ApiModel("知识园地视图" ...
- Java后端递归构建树形结构
记录:在Java后台利用递归思路进行构建树形结构数据,返回给前端,能以下拉菜单等形式进行展示. 简明:为了简化代码,引入Lombok的Jar包,可省略实体类set().get()方法. <dep ...
- php 递归生成树形菜单,递归生成树形结构菜单
public List listWithTree() { //1.查出所有菜单 List categoryEntities = categoryDao.selectList(null); //2.组装 ...
最新文章
- 使用ExtJs创建新的UI控件(转)
- Node读取并输出txt文件内容
- Asp.Net Mvc之模型注解
- Cloud Programming Simplified: A Berkerley View on Serverless Computing笔记
- js获取html5 audio 音频时长方法
- 苹果发布会新品曝光 这款软件肯定用得上
- java服务端用到的javase的基础知识_JavaSE——网络编程基础知识
- 短视频APP管理系统源码 直播系统源码
- 墨刀导出的html可以修改,怎么把墨刀的原型复制出来
- 白光led 计算机模拟,白光LED在TracePro中的建模及仿真
- 汇编 十六进制转二进制
- 操作系统期末大题类型题解
- 不同行业本地SEO和地域性SEO技巧
- 计算机硬盘里没有内容却显示有,为什么电脑磁盘里头明明没有东西,也没隐藏文件,却显示用了12个G。求解!...
- List集合关于Stream的操作
- linux 安装插件报错:Loaded plugins: fastestmirror
- PS中的画笔工具和修饰模式(画笔模式)
- 《Redis系列第三篇、incr与decr使用|CSDN创作打卡》
- 升级 QPython OH 内核至 Python 3.9
- 【三角函数】已知直角三角形的斜边长度和一个锐角角度,求另外两条直角边的长度...
热门文章
- 结对项目-最长单词链总结
- for in | for of | foreach 的小坑
- 微信防封养号规则大全(最新整理)
- vue解决图片加载失败显示默认图片的方法
- STM32 LWIP SNTP实现毫秒级的时间校准
- js实现九宫格翻牌抽奖(怎么也抽不中大奖系列)
- 基于JavaSSM+MySQL的学生综合素质测评系统设计与实现
- Java用抽象类模仿动物的叫声
- ConfigParser.InterpolationSyntaxError: ‘%‘ must be followed by ‘%‘ or ‘(‘, found: “%‘“ 解决方案
- HTTP请求错误状态码大全(HTTP Status Code)