基于vue手寫tree插件那點事

目錄

* iview提供的控件 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#iview提供的控件>
* 手寫控件 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#手寫控件>
* 手寫控件擴展 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#手寫控件擴展>
* 手寫控件總結(jié) <https://www.cnblogs.com/zhangxinhua/p/11375929.html#手寫控件總結(jié)>
* # 加入戰(zhàn)隊 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#加入戰(zhàn)隊>
* 微信公眾號 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#微信公眾號>
* 主題 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#主題>
Tree樹形控件在前端開發(fā)中必不可少，對于數(shù)據(jù)的展示現(xiàn)在網(wǎng)站大都采取樹形展示。因為大數(shù)據(jù)全部展示出來對于用戶來說是不友好的。今天我們自己手寫一個Tree插件。

iview提供的控件

* iview已經(jīng)很成熟了，如果說我寫的控件和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>
* 上述的代碼形成的效果如下


* 在使用Tree控件時在Template中還有如下樹形可以使用(根據(jù)自己需求)


* 然后就是控件的一些事件捕獲


* 子節(jié)點的一些設(shè)置


*
對于iview的Tree總結(jié)就是一句話：到位！。在這里小編也推薦大家使用iview來開發(fā)。這個框架對于后端程序員來說是個福利。因為我們不需要了解太專業(yè)的前端的只是就能夠滿足80%的需求了。
手寫控件

同樣的我們先來看看他的用法其實和iview一樣。用我們封裝好的模板就行了。下面是做一個部門樹。部門下面掛著人員這個功能。
<zxhtree v-if="userChange" class="item" treekey="deptId" treename="deptName"
treechildren="children" :model="deptData" :ids="sysUserRole.deptIds"
:names="sysUserRole.deptNames" @keyname="selectedUserObj" > </zxhtree>
js就是去填補上述的數(shù)據(jù)，比如deptData、sysUserRole這些。至于這些屬性代表什么意思我們先不著急看。先上個效果圖。



那么我們的zxhtree控件是在哪里注冊的呢，這里被我們抽離在component.js里。Vue.component('zxhtree', {});
繼續(xù)在zxhtree里看除綁定的節(jié)點是template: '#tree-template'。
tree-template的模板是在component.html中寫好的
<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控件。這里是為了將樹形包裹起來，所以才包裹了一層模板。
tree-item對應(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" 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-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>
可以很明顯的看到這里我們使用了遞歸進行展示樹形結(jié)構(gòu)。因為樹形結(jié)構(gòu)你無法確定層級。所以在里面又使用了針對子節(jié)點的展示tree-item.

屬性 含義 示例
treekey 內(nèi)部樹形展示 deptId
vistreekey 樹形展示key deptId
ids 默認(rèn)顯示的數(shù)據(jù) 無
names 默認(rèn)顯示的數(shù)據(jù) 無
treename 內(nèi)部真是展示數(shù)據(jù) deptName
vistreename 樹形展示數(shù)據(jù) deptName
treechildren 當(dāng)前樹的子節(jié)點數(shù)據(jù) 無
model 當(dāng)前樹的數(shù)據(jù) 無
(M)keyname 用于接受返回的數(shù)據(jù) 無
手寫控件擴展

控件接受數(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('組件注冊了嗎'); 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é)點數(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);
手寫控件總結(jié)


因為筆者是側(cè)重后端，所以前端知識不是很好，這個組件寫的也是很亂。這個組件是之前臨時寫的。里面沒有進行系統(tǒng)的梳理，上述的邏輯也是很亂。讀者需要的可以選擇下列加入戰(zhàn)隊(#addMe)聯(lián)系我
需要源碼的可關(guān)注下面公眾號發(fā)點擊進群后咨詢。

加入戰(zhàn)隊 <https://www.cnblogs.com/zhangxinhua/p/11375929.html#addMe>

# 加入戰(zhàn)隊

微信公眾號



主題

• ? 上一篇：k8s+istio:流量控制之灰度發(fā)布
• ? 下一篇：Appium+python自動化（二十九）- 模擬手指在手機上多線多點作戰(zhàn) - 多點觸控（超詳解）