vue-ztree-2.0实现树状结构

矫情吗；* 2024-04-17 21:59 60阅读 0赞

## 参考 ：[**官方文档**][Link 1] ##

**安装vue-ztree：**

npm install  vue-ztree-2.0

**main.js引入vue-ztree：**

import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
    import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'
    
    Vue.use(vueztree)

**app.js实现vue-ztree：**

<template>
      <div id="app">
        <h1>{
       { msg }}</h1>
        <div style='width:280px;'>
          <vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='false'></vue-ztree>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          msg: 'Hello Vue-Ztree-2.0!',
          ztreeDataSource: []
        }
      },
      created:function(){
        this.getData();
      },
      methods:{
        // 点击节点
        nodeClick:function(m){
           console.log(JSON.parse(JSON.stringify(m)));
        },
        // 右击事件
        contextmenuClick:function(m){
           console.log(m)
           console.log("触发了自定义的contextmenuClick事件");
        },
        // 点击展开收起
        expandClick:function(m){
           console.log(JSON.parse(JSON.stringify(m)));
           // 点击异步加载
           if(m.isExpand) {
              // 动态加载子节点, 模拟ajax请求数据
             // 请注意 id 不能重复哦。
             if(m.hasOwnProperty("children")){
                
                m.loadNode = 1; // 正在加载节点
    
                setTimeout(()=>{
                  
                  m.loadNode = 2; // 节点加载完毕
    
                  m.isFolder = !m.isFolder; 
                },1000)
                
             }
           }
        },
    
        getData(){
          var api = 'http://localhost:8080/area/list';
          this.$http.get(api).then(function(response){
            console.log(response);
            this.ztreeDataSource = response.body;
          },function(error){
            console.log("获取树状数据失败！！！");
          })
        }
      }
    }
    </script>
    
    <style>
    body {font-family: Helvetica, sans-serif;}
    </style>

**vue-ztree/初始化参数**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>树的结构数据源</td> 
  </tr> 
  <tr> 
   <td>func</td> 
   <td>Function</td> 
   <td>-</td> 
   <td>点击节点事件</td> 
  </tr> 
  <tr> 
   <td>contextmenu</td> 
   <td>Function</td> 
   <td>-</td> 
   <td>右击节点事件</td> 
  </tr> 
  <tr> 
   <td>expand</td> 
   <td>Function</td> 
   <td>-</td> 
   <td>点击展开/收起的方法（一般在异步加载的时候使用, 非异步加载传null）</td> 
  </tr> 
  <tr> 
   <td>is-open</td> 
   <td>Bealoon</td> 
   <td>true</td> 
   <td>是否展开树</td> 
  </tr> 
 </tbody> 
</table>

**Build Setup**

# install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build

**如果启动端口号冲突，可在"config–>index.js"中修改端口号：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1eGllbGVh_size_16_color_FFFFFF_t_70]

[**Demo代码（包含前后端）**][Demo]

[Link 1]: https://github.com/lisiyizu/vue-ztree-2.0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1eGllbGVh_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/01b48aa4ae29467292ef10f34dbbd087.png
[Demo]: https://download.csdn.net/download/yuxielea/11647281