显示效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<title>vue树型组件</title>
<style type="text/css">
.treefirst{
margin-left: 30px;
}
.treefirst .btn_name {
display: inline-block;
cursor: pointer;
background-color: #1CD8F3;
}
.treefirst .treefirst .btn_name{
background-color: yellow;
}
.treefirst .treefirst .treefirst .btn_name{
background-color: greenyellow;
}
.treefirst .treefirst .treefirst .treefirst .btn_name{
background-color: peachpuff;
}
.treefirst .treefirst .treefirst .treefirst .treefirst .btn_name{
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<treevue :datavalue="options" ></treevue>
</div>
<!-- 树型图组件 -->
<script id="treevue" type="text/template">
<div class="tree-vue" >
<div class="treefirst" v-for="(item1,index1) in datavalue" :key='index1' >
<div class="btn_name" @click.stop="item1.showflag = !item1.showflag"> {
{ item1.label }}{
{ item1.showflag | textshow(item1.children) }} </div>
<treevue v-show="item1.children && item1.showflag" :datavalue="item1.children" ></treevue>
</div>
</div>
</script>
<script type="text/javascript">
var treeVue = {
name:'treevue',
template: "#treevue",
props: ['datavalue'],
data: function() {
return {
options:'', //获取到的数据
}
},
mounted: function() {
var self = this;
this.options = this.datavalue;
$.each(this.options,function(index,item){
self.$set(item, 'showflag', true)
})
},
watch: {},
methods: {
},
filters:{
textshow:function(str,flag){
if(flag) {
if(str)
return " -- 显示";
else
return " -- 隐藏";
} else {
return ""
}
}
}
}
var vm = new Vue({
el:'#app',
data:{
options: [
{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{ value: 3, label: '普陀' },
{ value: 4, label: '黄埔' },
{ value: 5, label: '徐汇' }
]
}, {
value: 7,
label: '江苏',
children: [
{ value: 8, label: '南京' },
{ value: 9, label: '苏州' },
{ value: 10, label: '无锡' }
]
}, {
value: 12,
label: '浙江',
children: [
{ value: 13, label: '杭州' },
{ value: 14, label: '宁波' },
{ value: 15, label: '嘉兴' }
]
}]
}, {
value: 17,
label: '西北',
children: [{
value: 18,
label: '陕西',
children: [
{ value: 19, label: '西安',
children: [{
value: 19,
label: '陕西',
children: [
{ value: 30, label: '西安' },
{ value: 40, label: '延安' }
]
}, {
value: 41,
label: '新疆维吾尔族自治区',
children: [
{ value: 42, label: '乌鲁木齐' },
{ value: 43, label: '克拉玛依' }
]
}]
},
{ value: 20, label: '延安' }
]
}, {
value: 21,
label: '新疆维吾尔族自治区',
children: [
{ value: 22, label: '乌鲁木齐' },
{ value: 23, label: '克拉玛依' }
]
}]
}]
},
methods:{
},
components: {
treevue: treeVue
}
})
</script>
</body>
</html>