<!DOCTYPE html><html>
<head>
<meta charset=
"UTF-8"
>
<title>vue</title>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<link rel=
"stylesheet"
href=
"animate.css"
>
<script src=
"vue.js"
></script>
<style>
*{
color:#585858;
}
#app{
min-height: 650px;
}
#app li{
list-style-type:none;
}
#app a{
text-decoration:none;
}
#app button{
width:100%;
}
#app ul{
padding:10px;
}
#app span{
cursor:pointer;
}
#tree{
border: 1px solid #ccc;
min-height: 650px;
width: 50%;
margin:0;
padding-top: 10px;
background-color:#f2f2f2;
position: absolute;
top:0;
left:0;
}
#tree li {
display: block;
padding: 0;
margin: 0;
border: 0;
border-bottom: 1px solid #e5e5e5;
min-height: 32px;
line-height:32px;
}
</style>
</head>
<body>
<p id='app' @click='hideTree(
$event
)'>
<button @click.stop=
"show = !show"
>点我</button>
<transition enter-active-
class
=
"animated fadeInLeft"
leave-active-
class
=
"animated fadeOutLeft"
>
<item v-bind:tree='treeData' id='tree' v-
if
=
"show"
></item>
</transition>
</p>
<template id='tree-template'>
<ul>
<li v-
for
='(v,i) in tree'>
<span v-
if
=
"isFolder(v)"
@click=
"toggle(i)"
>{{ tree[i].open ?
'-'
:
'+'
}}</span>
<a data-id=
"v.id"
>{{v.city}}</a>
<item v-bind:tree='v.child' v-show=
"tree[i].open"
></item>
</li>
</ul>
</template>
<script>
var
data = [{
"id"
:26,
"pid"
:1,
"city"
:
"四川省"
},{
"id"
:30,
"pid"
:1,
"city"
:
"云南省"
},{
"id"
:322,
"pid"
:26,
"city"
:
"成都"
},{
"id"
:323,
"pid"
:26,
"city"
:
"绵阳"
},{
"id"
:324,
"pid"
:26,
"city"
:
"阿坝"
},{
"id"
:325,
"pid"
:26,
"city"
:
"巴中"
},{
"id"
:326,
"pid"
:26,
"city"
:
"达州"
},{
"id"
:327,
"pid"
:26,
"city"
:
"德阳"
},{
"id"
:328,
"pid"
:26,
"city"
:
"甘孜"
},{
"id"
:329,
"pid"
:26,
"city"
:
"广安"
},{
"id"
:330,
"pid"
:26,
"city"
:
"广元"
},{
"id"
:331,
"pid"
:26,
"city"
:
"乐山"
},{
"id"
:332,
"pid"
:26,
"city"
:
"凉山"
},{
"id"
:333,
"pid"
:26,
"city"
:
"眉山"
},{
"id"
:334,
"pid"
:26,
"city"
:
"南充"
},{
"id"
:335,
"pid"
:26,
"city"
:
"内江"
},{
"id"
:336,
"pid"
:26,
"city"
:
"攀枝花"
},{
"id"
:337,
"pid"
:26,
"city"
:
"遂宁"
},{
"id"
:338,
"pid"
:26,
"city"
:
"雅安"
},{
"id"
:339,
"pid"
:26,
"city"
:
"宜宾"
},{
"id"
:340,
"pid"
:26,
"city"
:
"资阳"
},{
"id"
:341,
"pid"
:26,
"city"
:
"自贡"
},{
"id"
:342,
"pid"
:26,
"city"
:
"泸州"
},{
"id"
:367,
"pid"
:30,
"city"
:
"昆明"
},{
"id"
:378,
"pid"
:30,
"city"
:
"曲靖"
},{
"id"
:3100,
"pid"
:367,
"city"
:
"盘龙区"
},{
"id"
:3101,
"pid"
:367,
"city"
:
"五华区"
},{
"id"
:3102,
"pid"
:367,
"city"
:
"官渡区"
},{
"id"
:3103,
"pid"
:367,
"city"
:
"西山区"
},{
"id"
:3104,
"pid"
:367,
"city"
:
"东川区"
},{
"id"
:3105,
"pid"
:367,
"city"
:
"安宁市"
},{
"id"
:3106,
"pid"
:367,
"city"
:
"呈贡县"
},{
"id"
:3107,
"pid"
:367,
"city"
:
"晋宁县"
},{
"id"
:3108,
"pid"
:367,
"city"
:
"富民县"
},{
"id"
:3109,
"pid"
:367,
"city"
:
"宜良县"
},{
"id"
:3110,
"pid"
:367,
"city"
:
"嵩明县"
},{
"id"
:3111,
"pid"
:367,
"city"
:
"石林县"
},{
"id"
:3112,
"pid"
:367,
"city"
:
"禄劝"
},{
"id"
:3113,
"pid"
:367,
"city"
:
"寻甸"
},{
"id"
:3189,
"pid"
:378,
"city"
:
"麒麟区"
},{
"id"
:3190,
"pid"
:378,
"city"
:
"宣威市"
},{
"id"
:3191,
"pid"
:378,
"city"
:
"马龙县"
},{
"id"
:3192,
"pid"
:378,
"city"
:
"陆良县"
},{
"id"
:3193,
"pid"
:378,
"city"
:
"师宗县"
},{
"id"
:3194,
"pid"
:378,
"city"
:
"罗平县"
},{
"id"
:3195,
"pid"
:378,
"city"
:
"富源县"
},{
"id"
:3196,
"pid"
:378,
"city"
:
"会泽县"
},{
"id"
:3197,
"pid"
:378,
"city"
:
"沾益县"
}];
var
treeData = createTree({
idname:
'id'
,
pidname:
'pid'
,
rootid:1,
data:data
});
function
createTree(arg){
var
idname = arg.idname,
pidname = arg.pidname,
rootid = arg.rootid,
data = arg.data,
treeData = [];
var
_createTree =
function
(id){
var
ret = [];
var
index = 0;
for
(
var
i = 0; i < data.length; i++){
if
(data[i][pidname] == id){
ret[index] = data[i];
ret[index].child = _createTree(data[i][idname]);
index++;
}
}
return
ret;
}
var
index = 0;
for
(
var
i = 0; i < data.length; i++){
if
(data[i][pidname] == rootid){
treeData[index] = data[i];
treeData[index].child = _createTree(data[i][idname]);
index++;
}
}
return
treeData;
}
Vue.component('item', {
template: '#tree-template',
props: ['tree'],
data:
function
() {
return
{}
},
methods: {
toggle:
function
(i) { this.tree[i].open = !this.tree[i].open; this.
$set
(this.tree, i, this.tree[i]);
},
isFolder:
function
(data) {
return
data.child && data.child.length
},
},
})
var
vm =
new
Vue({
el: '#app',
data: {
treeData: treeData,
show:false,
},
methods: {
hideTree:
function
(e){
if
(e.target.id == 'app'){
console.log(137); this.show = false;
}
}
},
created:
function
() {
function
_addOpen(data) {
for
(
var
i = 0; i < data.length; i++) {
data[i]['open'] = false;
if
(data[i].child.length > 0) {
_addOpen(data[i].child);
}
}
}
_addOpen(this.treeData);
}
}); </script>
</body></html>