深入理解vue父子组件之从零开始Tree插件

本文主要是介绍深入理解vue父子组件之从零开始Tree插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

[TOC]

Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个Tree插件。

iview提供的控件

  • iview已经很成熟了,如果说我写的控件和iview提供的控件谁更好,那肯定是选择iview , 手写控件只是为了更好的了解vue父子组件之间的通信的。 请读者还是不要拿我的控件和iview或者其他第三方的去对比。下面我们先来看看iview的Tree控件如何使用

<template><Tree :data="data2" show-checkbox></Tree>
</template><script>export default {data () {return {data2: [{title: 'parent 1',expand: true,children: [{title: 'parent 1-1',expand: true,children: [{title: 'leaf 1-1-1'},{title: 'leaf 1-1-2'}]},{title: 'parent 1-2',expand: true,children: [{title: 'leaf 1-2-1'},{title: 'leaf 1-2-1'}]}]}]}}}
</script>

  • 上述的代码形成的效果如下

iview树形图

  • 在使用Tree控件时在Template中还有如下树形可以使用(根据自己需求)

树形介绍

  • 然后就是控件的一些事件捕获

事件

  • 子节点的一些设置

children

  • 对于iview的Tree总结就是一句话:到位!。在这里小编也推荐大家使用iview来开发。这个框架对于后端程序员来说是个福利。因为我们不需要了解太专业的前端的只是就能够满足80%的需求了。

手写控件

同样的我们先来看看他的用法其实和iview一样。用我们封装好的模板就行了。下面是做一个部门树。部门下面挂着人员这个功能。


<zxhtreev-if="userChange"class="item"treekey="deptId"treename="deptName"treechildren="children":model="deptData":ids="sysUserRole.deptIds":names="sysUserRole.deptNames"@keyname="selectedUserObj"
>
</zxhtree>

js就是去填补上述的数据,比如deptData、sysUserRole这些。至于这些属性代表什么意思我们先不着急看。先上个效果图。

树形

那么我们的zxhtree控件是在哪里注册的呢,这里被我们抽离在component.js里。Vue.component('zxhtree', {});继续在zxhtree里看除绑定的节点是template: '#tree-template'。tree-template的模板是在component.html中写好的


<script type="text/x-template" id="tree-template"><div><tree-itemclass="item":treekey="treekey"v-for="(model, index) in model":treename="treename":treechildren="treechildren":model="model":ids="ids":names="names"@keyname="selectedObj"@data="synchdata"></tree-item></div>
</script>

而在tree-template用到的tree-item控件才是真正的tree控件。这里是为了将树形包裹起来,所以才包裹了一层模板。tree-item对应的模板代码是


<script type="text/x-template" id="item-template"><ul class="ztree"><li class="level0" @blur="blur" @focus="focus" tabindex="0" hidefocus="true" treenode=""><input type="checkbox" :disabled="model.disabled" :ref="model[treename]" :checked="checkStatus" @click="selectedObj"/><span title="" @click="toggle" :class="openStatus" treenode_switch=""></span><a :class="selectClass" treenode_a="" onclick="" target="_blank" style="" :title="model[treename]"><span title="" treenode_ico="" class="button ico_open" style=""></span><span @dblclick="toggle" class="node_name">{{model[treename]}}</span></a><tree-itemclass="item"v-show="open"v-for="(model, index) in model[treechildren]":key="index":model="model":treekey="treekey":treename="treename":vistreekey="vistreekey":vistreename="vistreename":treechildren="treechildren"ref="child"@keyname="keyname"></tree-item></li></ul>
</script>

可以很明显的看到这里我们使用了递归进行展示树形结构。因为树形结构你无法确定层级。所以在里面又使用了针对子节点的展示tree-item.

属性含义示例
treekey内部树形展示deptId
vistreekey树形展示keydeptId
ids默认显示的数据
names默认显示的数据
treename内部真是展示数据deptName
vistreename树形展示数据deptName
treechildren当前树的子节点数据
model当前树的数据
(M)keyname用于接受返回的数据

手写控件扩展

控件接受数据处理逻辑


//接收到数据在外面套一层
if(this.model[this.treekey]==undefined){this.treekey=this.vistreekey;
}
if(this.model[this.treename]==undefined){this.treename=this.vistreename;
}
if (this.model.disabled == true) {this.model.disabled = 'disabled';
}
console.log('组件注册了吗');
if ((','+this.ids+',').indexOf(','+this.model[this.treekey]+',') == -1) {this.checkStatus = false;this.model.checkStatus=this.checkStatus;
} else {this.checkStatus=true;this.model.checkStatus=this.checkStatus;this.treekeys[this.model[this.treekey]]= this.checkStatus;this.treenames[this.model[this.treename]]= this.checkStatus;this.opt.key=this.treekeys;this.opt['name']=this.treenames;
}
if(this.ids!=''){var idarr = this.ids;for(var index in idarr){this.treekeys[idarr[index]]=true;}if (this.names.indexOf(",") == -1&&this.names!='') {this.treenames[this.names]=true;}else{var namearr = this.names.split(",");for(var index in namearr){this.treenames[namearr[index]]=true;}}
}

渲染默认数据


var newOpt ={'key':{},'name':{}};newOpt.key = Object.assign(this.opt.key, opt.key);newOpt.name = Object.assign(this.opt.name, opt.name);var flag=false;for(var index in this.model[this.treechildren]){if(newOpt.key[this.model[this.treechildren][index][this.treekey]]!=true){flag=true;}}if(!flag){newOpt.key[this.model[this.treekey]]=true;newOpt.name[this.model[this.treename]]=true;this.checkStatus=true;this.model.checkStatus=true;}for(var key in newOpt){this.filterRealCheck(newOpt[key]);}this.opt=newOpt;this.$emit('keyname', newOpt);

选择节点数据处理


if(selected instanceof MouseEvent){this.checkStatus=!this.checkStatus;
}else{this.checkStatus=selected;
}this.model.checkStatus=this.checkStatus;
if (this.model.expected != true) {this.treekeys[this.model[this.treekey]]= this.checkStatus;this.treenames[this.model[this.treename]]= this.checkStatus;this.opt.key=this.treekeys;this.opt['name']=this.treenames;
}
for(var index in this.$refs.child){this.$refs.child[index].selectedObj(this.checkStatus);
}this.$emit('keyname', this.opt);

手写控件总结

因为笔者是侧重后端,所以前端知识不是很好,这个组件写的也是很乱。这个组件是之前临时写的。里面没有进行系统的梳理,上述的逻辑也是很乱。读者需要的可以选择下列加入战队(#addMe)联系我需要源码的可关注下面公众号发点击进群后咨询。

加入战队

加入战队

微信公众号

微信公众号

主题

封面

这篇关于深入理解vue父子组件之从零开始Tree插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118126

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能