Vue.js 树形菜单使用

描述：

在项目中引用了vuejs，项目中需要展示一个树形菜单，参考之前项目中的两种做法：

=================================================================

1. 使用 jsTree + ftl 宏的定义 来展示，页面加载时数据已经查完，通过宏来加载
2. 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>