lisiyizu / vue-ztree-2.0 Goto Github PK

JavaScript 23.95% HTML 0.45% Vue 75.59%

vue-ztree-2.0's Introduction

vue-ztree-2.0

安装步骤：

  npm install  vue-ztree-2.0

vue-ztree-2 演示预览地址

Vue小伙伴交流群: 590688906

通过以下demo来实现

main.js 代码如下

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  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)

  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
  })

app.vue代码如下

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div style='width:280px;'>
      <vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'></vue-ztree>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue-Ztree-2.0!',
      ztreeDataSource:[{
                id:1,
                name:"音乐",
                children:[],
                url:"http://www.baidu.com"
      },{
          id:2,
          name:"视频",
          children:[{
             id:3,
             name:"电影",
             children:[{
                id:4,
                name:"国产电影",
                url:""
             },{
                id:5,
                name:"好莱坞电影",
                url:""
             },{
                id:6,
                name:"小语种电影",
                url:""
             }]
          },{
             id:7,
             name:"短片",
             children:[{
                id:9,
                name:"电视剧",
                url:""
             },{
                id:10,
                name:"短片",
                url:""
             }]
          }]
      }]
    }
  },
  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; 

              m.children.push({
                  id:+new Date(),
                  name:"动态加载节点1",
                  path:"",
                  clickNode:false,
                  isFolder:false,
                  isExpand:false,
                  loadNode:0,
                  children:[{
                        id:+new Date()+1,
                        name:"动态加载末节点",
                        path:"",
                        clickNode:false,
                        isExpand:false,
                        isFolder:false,
                        loadNode:0
                  }]
              })
            },1000)
            
         }
       }
    }
  }
}
</script>

<style>
body {font-family: Helvetica, sans-serif;}
</style>

vue-ztree/初始化参数

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

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

vue-ztree-2.0's People

Contributors

Stargazers

Watchers

Forkers

gevilhost libin1991 y494890511 lly0122 jackjiezhang 179309463 camelwu yunhor yanhuaguo santiini funjia czh378762 smile-shop feifei-li qianweirong williamjie liuweiyibai zzhij xuxiang32 huajun9108 zuolg raincoolly wuweiwuwei azkfrm huangchenxiao sjn1978 75168859 gybing zhuwei123 noicu chaochao6632 calamus0427 gemeng159 qiuzhangcheng half-a-turnip gaodaxiu0406 loujianghua lrzaoan liuunique simbahuang ismartsoft haoshenpei jackeasons unclefour chengmanxiang andychu525 zcj2121 nihaolfccc gubojun jimmybai zhaohongbo910 otaku1951 jadechilde luozhonghua kfbyldy nameli jamesfeifei amosyue keyajohn 1454090911 chiefzzs singod zeronofreya dongwenpeng 996coder yangyfeng okfantasy007 skyformat99 yxfcn jeminw webengineergh zhangqun23 dujingya liu-biao hhy5277 tedachenx56 wangfs whczs xiaoyao1114 buhanqiu foundations liu-huitao wangjing1125 hasyou99 phm1234567 18801268763 zhanghuifang111 351531104 q986171791 suzhenhui liucaidong itdavidhan yuanqixun lyczenvo n1wd shmikero fucora nbmaomin xw18781085229 mgicode

vue-ztree-2.0's Issues

现版本出现错误的情况

This dependency was not found:

@/views/Main in ./src/router/index.js

To install it, you can run: npm install --save @/views/Main

-------------------------------更正方法---------------------------
"src/router/index.js" 15 lines

import Main from '@/views/Main'

import Main from '@/views/main'

在axios数据回调函数里面给树的结构数据源赋值，为什么视图上不能显示呢

怎么触发选择框事件

选择框的事件怎么触发啊，我看源码里有ckFunc这个函数，但是我在组件上用:ck-func=函数名，点击这个函数名的时候也没法触发，

我这里要完成一个搜索的功能，但是我已经搜索出原始的数据，就是那么页面初始化的是不正确的，请问是哪里出了问题呢？

紧急！！！需要完成一个搜索功能，将搜索的结果也以树的形式展示，已经有原始数据，但是组件生成的树结构却不正常，我默认是让二级的树展开。截图如下，

把你的东西直接放我的后台程序里面就不出结果了我这边用的是服务端渲染 SSR

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

--->
at D:\vue\wgssr\src\components\vue-ztree.vue
at D:\vue\wgssr\src\views\tree.vue
at D:\vue\wgssr\src\App.vue

把你的东西直接放我的后台程序里面就不出结果了我这边用的是服务端渲染 SSR

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
您使用的是仅运行时的 Vue 内部版本，其中模板编译器不可用。将模板预编译为呈现函数，或使用编译器包含的生成

复制示例，啥也没有改动，就这样，希望大神能解答

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.