這篇文章將為大家詳細(xì)講解有關(guān)基于vue如何實(shí)現(xiàn)tree插件,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
為波密等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及波密網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、波密網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
iview提供的控件
iview已經(jīng)很成熟了,如果說(shuō)我寫(xiě)的控件和iview提供的控件誰(shuí)更好,那肯定是選擇iview , 手寫(xiě)控件只是為了更好的了解vue父子組件之間的通信的。 請(qǐng)讀者還是不要拿我的控件和iview或者其他第三方的去對(duì)比。下面我們先來(lái)看看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>
上述的代碼形成的效果如下
在使用Tree控件時(shí)在Template中還有如下樹(shù)形可以使用(根據(jù)自己需求)
然后就是控件的一些事件捕獲
子節(jié)點(diǎn)的一些設(shè)置
對(duì)于iview的Tree總結(jié)就是一句話:到位!。在這里小編也推薦大家使用iview來(lái)開(kāi)發(fā)。這個(gè)框架對(duì)于后端程序員來(lái)說(shuō)是個(gè)福利。因?yàn)槲覀儾恍枰私馓珜I(yè)的前端的只是就能夠滿足80%的需求了。
手寫(xiě)控件
同樣的我們先來(lái)看看他的用法其實(shí)和iview一樣。用我們封裝好的模板就行了。下面是做一個(gè)部門樹(shù)。部門下面掛著人員這個(gè)功能。
<zxhtree v-if="userChange" class="item" treekey="deptId" treename="deptName" treechildren="children" :model="deptData" :ids="sysUserRole.deptIds" :names="sysUserRole.deptNames" @keyname="selectedUserObj" > </zxhtree>
js就是去填補(bǔ)上述的數(shù)據(jù),比如deptData、sysUserRole這些。至于這些屬性代表什么意思我們先不著急看。先上個(gè)效果圖。
那么我們的zxhtree控件是在哪里注冊(cè)的呢,這里被我們抽離在component.js里。Vue.component('zxhtree', {});
繼續(xù)在zxhtree里看除綁定的節(jié)點(diǎn)是template: '#tree-template'
。
tree-template的模板是在component.html中寫(xiě)好的
<script type="text/x-template" id="tree-template"> <div> <tree-item class="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控件。這里是為了將樹(shù)形包裹起來(lái),所以才包裹了一層模板。
tree-item對(duì)應(yīng)的模板代碼是
<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" :title="model[treename]"> <span title="" treenode_ico="" class="button ico_open" ></span> <span @dblclick="toggle" class="node_name">{{model[treename]}}</span> </a> <tree-item class="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>
可以很明顯的看到這里我們使用了遞歸進(jìn)行展示樹(shù)形結(jié)構(gòu)。因?yàn)闃?shù)形結(jié)構(gòu)你無(wú)法確定層級(jí)。所以在里面又使用了針對(duì)子節(jié)點(diǎn)的展示tree-item.
屬性 | 含義 | 示例 |
---|---|---|
treekey | 內(nèi)部樹(shù)形展示 | deptId |
vistreekey | 樹(shù)形展示key | deptId |
ids | 默認(rèn)顯示的數(shù)據(jù) | 無(wú) |
names | 默認(rèn)顯示的數(shù)據(jù) | 無(wú) |
treename | 內(nèi)部真是展示數(shù)據(jù) | deptName |
vistreename | 樹(shù)形展示數(shù)據(jù) | deptName |
treechildren | 當(dāng)前樹(shù)的子節(jié)點(diǎn)數(shù)據(jù) | 無(wú) |
model | 當(dāng)前樹(shù)的數(shù)據(jù) | 無(wú) |
(M)keyname | 用于接受返回的數(shù)據(jù) | 無(wú) |
手寫(xiě)控件擴(kuò)展
控件接受數(shù)據(jù)處理邏輯
//接收到數(shù)據(jù)在外面套一層 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('組件注冊(cè)了嗎'); 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; } } }
渲染默認(rèn)數(shù)據(jù)
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);
選擇節(jié)點(diǎn)數(shù)據(jù)處理
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);
關(guān)于“基于vue如何實(shí)現(xiàn)tree插件”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
分享題目:基于vue如何實(shí)現(xiàn)tree插件
網(wǎng)站URL:http://redsoil1982.com.cn/article38/pooepp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、ChatGPT、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)