使用vue自定義元件實現樹形列表
最近公司做新專案用的是vue,有一個功能做一個樹形列表由於之前一直用的是jquery操作dom,剛接觸vue走了不少彎路,特意寫部落格記錄一下
一、js自定義一個元件
<script type="text/template" id="tpl">
<ol class="dd-list" style="margin-left:60px;">
<li class="dd-item dd2-item dept-name" style="margin-bottom:10px" v-for="(item,index) in model" :num="index" @click.self="toggle(item.childTreeNode)" :key="item.id">
<span style="position:absolute;top:-2px;left:-52px;" class="dd-item"><img v-bind:src="item.imageUrl" width="40px;" height="40px;"></span>
<div class="dd2-content" style="cursor:pointer;">
{{item.categoryName}} <span style="padding-left:20px;color:red;" @click="toggle(item.childList,item)">+</span>
<div style="margin-left:20px;margin-top:-20px;margin-left:300px;">
<a class="green dept-edit" href="#" style="text-decoration:none;" >
編輯 <i class="ace-icon"></i>
</a>
</div>
<a class="red dept-delete" href="#" style="text-decoration:none;">
<i class="ace-icon fa fa-flag bigger-100"></i>
<span style="float:right;"></span>
</a>
</div>
<items v-if="item.open" :model="item.childList"></items>
</li>
</ol>
</script>
Vue.component('items',{
props:['model'],
name:'items',
template:'#tpl',
data:function(){
return {
open:false,
num:''
}
},
methods:{
toggle:function(e,item){
console.log(item);
if(e){
console.log(item.open);
var flag = item.flag;
if(flag == '-'){
item.flag="+";
item.open = false;
}else{
item.flag="-";
item.open = true;
}
// this.open=!this.open
}
}
}
})
var vue = new Vue({
el:"#app",
data: {
data:[],
},
mounted:function(){
var self = this;
var param = new URLSearchParams();
axios.post('../category/findCategoryTree',param)
.then(function(res){
if (res.data.code==0) {
self.data = res.data.data.categoryTree;//從後臺動態獲取樹形資料
console.log(self.data);
}
else{
Message.error(res.body.statusMsg);
}
},
function(err){
Message.error('與伺服器連線錯誤!');
})
});
在需要顯示的頁面html程式碼
<div class="main-content-inner" id="app">
<div class="col-sm-3">
<div class="table-header" style="width:1200px;">
分類管理
<a class="green" href="#">
<i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
</a>
</div>
<div id="categoryList" style="width:1200px;">
<items :model='data'></items>
</div>
</div>
</div>