Use vue to implement tree menu bar function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Use vue to implement tree menu bar function

Jun 15, 2018 pm 03:15 PM

vue tree menu

This time I will bring you the use of vue to implement the tree menu bar function. What are the precautions for using vue to implement the tree menu bar function? The following is a practical case, let's take a look.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;vue&lt;/title&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;animate.css&quot;&gt;
 &lt;script src=&quot;vue.js&quot;&gt;&lt;/script&gt;
 &lt;style&gt;
  *{
  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;
  }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p id=&#39;app&#39; @click=&#39;hideTree($event)&#39;&gt;
  &lt;button @click.stop=&quot;show = !show&quot;&gt;点我&lt;/button&gt;
  
  &lt;transition enter-active-class=&quot;animated fadeInLeft&quot; leave-active-class=&quot;animated fadeOutLeft&quot;&gt;
  &lt;item v-bind:tree=&#39;treeData&#39; id=&#39;tree&#39; v-if=&quot;show&quot;&gt;&lt;/item&gt; 
  &lt;/transition&gt; 
 &lt;/p&gt;
 &lt;template id=&#39;tree-template&#39;&gt;
  &lt;ul&gt;
  &lt;li v-for=&#39;(v,i) in tree&#39;&gt; 
   &lt;span v-if=&quot;isFolder(v)&quot; @click=&quot;toggle(i)&quot;&gt;{{ tree[i].open ? '-' : '+' }}&lt;/span&gt;
   &lt;a data-id=&quot;v.id&quot;&gt;{{v.city}}&lt;/a&gt; 
   &lt;item v-bind:tree=&#39;v.child&#39; v-show=&quot;tree[i].open&quot;&gt;&lt;/item&gt;
  &lt;/li&gt;
  &lt;/ul&gt; 
 &lt;/template&gt;
 &lt;script&gt;
  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 &lt; 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 &lt; data.length; i++){  
   if(data[i][pidname] == rootid){
   treeData[index] = data[i];
   treeData[index].child = _createTree(data[i][idname]);
   index++;
   } 
  }
  return treeData;
  }
  Vue.component(&#39;item&#39;, {
  template: &#39;#tree-template&#39;,
  props: [&#39;tree&#39;],
  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 &amp;&amp; data.child.length
   },
  },
  })
  var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
   treeData: treeData,
   show:false,
  },
  methods: {
   hideTree:function(e){
   if(e.target.id == &#39;app&#39;){
    console.log(137);
    this.show = false;
   }
   }
  },
  created: function () {
   function _addOpen(data) {
   for (var i = 0; i &lt; data.length; i++) {
    data[i][&#39;open&#39;] = false;
    if (data[i].child.length &gt; 0) {
    _addOpen(data[i].child);
    }
   }
   }
   _addOpen(this.treeData);
  }
  });
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!