极客观点
项目管理
HarmonyOS
用vue写了一个组织树结构，但是不清楚怎么实现展开折叠。
样式结构都已经写好了，
我的思路：
- 展开折叠通过类名 active 来控制
- 当前状态（背景会高亮）通过类名 curr 来控制
但是我现在被卡住了，不清楚点击的时候如何动态添加这两个类名
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>树结构练习</title>
<link rel="stylesheet" href="css/iconfont/iconfont.css">
<link rel="stylesheet" href="css/tree.css">
</head>
<body>
<div id="treeDemo" class="tree">
<!-- 公司名称 开始 -->
<a class="company-name" href="javascript:;">
<i class="iconfont icon-arrow_u"></i>
<span>{{tree.data.name}}</span>
<em>(0人)</em>
</a>
<!-- 公司名称 结束 -->
<!-- 部门列表 开始 -->
<my-tree class="tree-list" :model="tree.data.children"></my-tree>
<!-- 部门列表 结束 -->
</div>
<script type="text/x-template" id="treeTemplate">
<ul>
<li v-for="(item, index) in model">
<!-- 展开折叠通过类名：active来控制 -->
<!-- 当前高亮位置通过类名：curr来控制 -->
<a href="javascript:;" v-bind:class="{active: true, curr: false}" v-on:click="debug()">
<i class="iconfont" v-if="item.children"></i>
<span>{{item.name}}</span>
<em>(xxx人)</em>
</a>
<my-tree class="inner-list" v-if="item.children" :model="item.children"></my-tree>
</li>
</ul>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="js/treeData.js"></script>
<script src="js/treeComponent.js"></script>
<script>
new Vue({
el: '#treeDemo',
data: {
tree: tree,
}
});
</script>
</body>
</html>treeComponent.js
Vue.component('my-tree', {
template: '#treeTemplate',
props: ['model'],
data: function(){
return {
//
};
},
computed: {
//
},
methods: {
debug: function(){
console.log("点击了");
}
}
});treeData.js
var tree = {
data: {
name: '北京阿里巴巴有限公司',
children:[
{
name:"行业应用部",
children:[
{
name: "前端",
children:[
{
name: "官网"
},
{
name: "EOS"
}
]
},
{
name: "Java",
children:[
{
name: "实习1"
},
{
name: "实习2"
},
{
name: "实习3"
}
]
}
]
},
{
name:"产品部",
children:[
{
name:"UI"
},
{
name:"测试"
},
{
name:"产品经理"
}
]
}
]
}
};
可以在组件内部通过一个变量配合v-show来实现展开和折叠，可以参考我以前的博客vue递归组件