描述:
在项目中引用了vuejs,项目中需要展示一个树形菜单,参考之前项目中的两种做法:
=================================================================
- 使用 jsTree + ftl 宏的定义 来展示,页面加载时数据已经查完,通过宏来加载
- zTree
VS
- 过繁琐pass掉了
- 方案有他的优势,zTree有树状菜单的各种完整操作,而且简单格式和我们直接查出的数据格式很相似 由于我这里是个简单的树状展示,Vue.js的示例完全支持,就不单独引用其他插件了,也更加节约
思路
使用 组件,将循环展示的元素做成组件,在页面中调用
引用
1. 下载Vue.js应用到项目中 2. 组装数据
// demo data, 这是需要的数据格式,从表中查到的数据不是这样的,需要重新进行封装为下面形式
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
}
在使用时一般一级不会只有一个,我得到的数据是个List
var data[
{
name:"ss",
其他元素...
children[
{ name: 'hello' },
{ name: 'wat' }
]
},
{
name:"zz",
其他元素...
children[
{ name: 'hello' },
{ name: 'wat' }
]
}
]
复制代码
3.编写组件 以及 应用
//组件中html代码较多,可以使用script的模板类型,html不会解析
<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle">
<span @click="selectCategory()">{{ model.categoryName }}</span>
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
</ul>
</li>
</script>
<script> //没写类型表示text/javascript
// define the item component
Vue.component('item', {
template: '#item-template',
props: ['model'], //props 可以是数组或对象,用于接收来自父组件的数据
data: function () { //组件中data 必须是函数
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children && //得到的结果是长度数值,用if判断数值,0为false,非0为true
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
selectCategory: function () { //当前组件中调用方法,组件中的值是直接能取到的
if(!this.isFolder){
console.log(this.model.categoryName+"---"+this.model.description);
}
}
}
})
//创建 Vue示例
var category = new Vue({
el: '#category',
data: {
treeData: ""
},
beforeCreate: function () {
$.getJSON("getPublicCategory", function (data, status) {
category.treeData = data.categoryList;
})
},
methods: {
}
})
</script>
//页面中调用,将数据绑定到组件中, 树状菜单第一层就可能有多个,用到了V-for
<ul id="category" class="category">
<item class="item" v-for="(treeNode,index) in treeData"
v-bind:model="treeNode" :key="index">
</item>
</ul>
复制代码