精华内容
下载资源
问答
  • vue中使用vue-ztree-2.0
    2020-01-03 09:00:21

    搭建vue项目

    安装vue-ztree-2.0

    npm i vue-ztree-2.0 
    

    在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.config.productionTip = false
    
    Vue.use(vueztree);
    new Vue({
      el: '#app',
      router,
      components: {
        App
      },
      template: '<App/>'
    })
    

    在.vue页面文件中编写模板

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

    list是数据列表,其它参考这里
    :is-check=“true” 可以开启选框,这个是在源码发现的,在示例里没有说明。也就是说还有其它的属性但是介绍里没有说明。

    更多相关内容
  • 基于Vue-Ztree-2.0实现树状结构的展示 启动步骤: 1.cmd至前端项目根目录执行“npm install”命令 2.“npm start”命令启动项目 后端项目:tree 基于springboot、mybaits-plus、mysql实现树状结构 启动步骤: 1.mvn...
  • vue-ztree-2.0实现树状结构

    千次阅读 2019-09-02 09:36:10
    参考 :官方文档 安装vue-ztree: npm install vue-ztree-2.0 ...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...

    参考 :官方文档

    安装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/初始化参数

    参数类型默认值描述
    listArray-树的结构数据源
    funcFunction-点击节点事件
    contextmenuFunction-右击节点事件
    expandFunction-点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null)
    is-openBealoontrue是否展开树

    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"中修改端口号:
    在这里插入图片描述

    Demo代码(包含前后端)

    展开全文
  • 我拿来了 ztree的样式库,自己动手写的算法,整了一个小而美的 vue-ztree 组件,它基本上能满足我的业务需求,我也希望造福开源社区,打算贡献点微薄之力,就把它开源了。概要 :1: vue-ztree 的效果图2: vue-ztree ...

    最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧。

    我拿来了 ztree的样式库,自己动手写的算法,整了一个小而美的 vue-ztree  组件,它基本上能满足我的业务需求,我也希望造福开源社区,打算贡献点微薄之力,就把它开源了。

    概要 :

    1: vue-ztree 的效果图

    2: vue-ztree 的调用方式

    3: vue-ztree 的技术点

    4: vue-ztree 的开源地址

    1: vue-ztree 的效果图

    vue-ztree 的效果,如下图所示:

    图一:

     

    图二:

    2: vue-ztree 的调用方式:

    组件写法,如下图:

    vue-ztree 的参数讲解:

    参数

    类型

    默认值

    描述

    list

    Array

    -

    树的结构数据源

    func

    Function

    -

    点击节点回调的方法

    is-open

    Bealoon

    true

    是否展开树

    3. vue-ztree 的技术点

    vue-ztree的技术点,主要是大量用到了递归算法,以及一些巧妙的编码技巧。

    4. vue-ztree 的 开源地址

    安装运行步骤:

    1: npm install

    2: npm run dev

    看到运行效果如图:

    展开全文
  • 基于vue-giant-ztree修改,添加类似图标⬇️ 获取icon代码方法--------借鉴大佬的经验拿到了自己项目所需的图标 在ztree引用只需如下几个文件 ztree对应的vue文件 <template> <div id="z-tree" ...

    由于数据量大简单的iview的tree或是el的tree加载数据造成页面卡顿,前端操作不流畅。

    基于vue-giant-ztree修改,添加类似图标⬇️

    获取icon代码方法 --------借鉴大佬的经验拿到了自己项目所需的图标

    在ztree引用只需如下几个文件

     ztree对应的vue文件

    <template>
        <div id="z-tree" class="flex-col">
            <div class="wrap flex-1">
                <div class="c">
                    <tree
                        :setting="setting"
                        :nodes="nodes"
                        @onClick="onClick"
                        @onCreated="handleCreated"
                        @updateData="updateData"
                        @onExpand="onExpand"
                    />
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import "../Ztree/style/iconfont.css";
    import {mapGetters, mapMutations} from "vuex";
    import CONSTANT from "../../../config/constant";
    
    export default {
        name: "app",
        components: {
            tree: ()=> import("../Ztree/ztree.vue")
        },
        props: {
            cardWidth: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                selectTreeNodeId: null,
                ztreeObj: null,
                setting: {
                    edit: {
                        enable: true,
                        //是否显示默认的删除按钮
                        showRemoveBtn: false,
                        showRenameBtn: false,
                        drag: false
                    },
                    //设置前面显示的图标
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "parentId",
                        },
                        // 设置图标库(采用iconfont class形式)
                        iconMap: {
                            true: "icon-wenjian",
                            false: "icon-js",
                        },
                        // 设置对应每个节点的节点类型,与数据中customType对应(25行)
                        key: {
                            nodeType: "isFolder",
                            name: "title",
                        },
                    },
                    view: {
                        // 开启图标显示功能
                        showIcon: true,
                        addHoverDom: this.addHoverDom,
                        removeHoverDom: this.removeHoverDom,
                        addDiyDom: this.addDiyDom,
                        dblClickExpand: false,
                    },
                },
            };
        },
        computed: {
            nodes() {
                return this.getCodeTreeData();
            }
        },
        watch: {
            cardWidth: {
                handler(newVal, oldVal) {
                    if (this.ztreeObj) {
                        let nodes = this.ztreeObj.getNodes();
                        for (let i=0; i<nodes.length; i++) {
                            this.asyncNodeDom(nodes[i].children, nodes[i].open);
                        }
                    }
                }
            }
        },
        methods: {
            ...mapGetters(["getCodeTreeData", "getNewTreeNode"]),
            ...mapMutations(["setNewTreeNode"]),
            //设置节点后面对节点进行操作的图标
            addHoverDom(treeId, treeNode) {
                const item = document.getElementById(`${treeNode.tId}_a`);
                if (
                    item
                    && !item.querySelector(".tree_extra_historyBtn")
                    && treeNode.level !== 0
                    && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
                ) {
                    const history = document.createElement("img");
                    history.id = `${treeId}_${treeNode.id}_historyBtn`;
                    history.classList.add("tree_extra_historyBtn");
                    history.src = require("../Ztree/style/img/History.svg");
                    history.style.width = "20px";
                    history.style.height = "20px";
                    history.style.marginLeft = "5px";
                    history.style.marginBottom = "12px";
                    history.title = "版本";
                    history.addEventListener("click", (e) => {
                        e.stopPropagation();
                        this.selectTreeNodeId = treeNode.tId;
                        this.$emit("onClick", treeNode,"edition");
                    });
                    item.appendChild(history);
                }
                if (
                    item
                    && !item.querySelector(".tree_extra_btn_add")
                    && !treeNode.isFolder
                    && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
                ) {
                    const shareBtn = document.createElement("img");
                    shareBtn.id = `${treeId}_${treeNode.id}_btn_add`;
                    shareBtn.classList.add("tree_extra_btn_add");
                    shareBtn.src = require("../Ztree/style/img/share-1-copy.svg");
                    shareBtn.style.width = "14px";
                    shareBtn.style.height = "15px";
                    shareBtn.style.marginLeft = "5px";
                    shareBtn.style.marginBottom = "12px";
                    shareBtn.title = "分享";
                    shareBtn.addEventListener("click", (e) => {
                        e.stopPropagation();
                        this.selectTreeNodeId = treeNode.tId;
                        this.$emit("onShare", treeNode);
                    });
                    item.appendChild(shareBtn);
                }
    
                if (
                    item
                    && !item.querySelector(".tree_extra_btn")
                    && treeNode.level !== 0
                    && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
                ) {
                    const updateBtn = document.createElement("img");
                    updateBtn.id = `${treeId}_${treeNode.id}_btn`;
                    updateBtn.classList.add("tree_extra_btn");
                    updateBtn.src = require("../Ztree/style/img/set.svg");
                    updateBtn.style.width = "22px";
                    updateBtn.style.height = "22px";
                    updateBtn.style.marginLeft = "5px";
                    updateBtn.style.marginBottom = "12px";
                    updateBtn.title = "更新";
                    updateBtn.addEventListener("click", (e) => {
                        e.stopPropagation();
                        this.selectTreeNodeId = treeNode.tId;
                        this.$emit("onUpdate", treeId, treeNode)
                    });
                    item.appendChild(updateBtn);
                }
                if (
                    item
                    && !item.querySelector(".tree_extra_deleteBtn")
                    && treeNode.level !== 0
                    && treeNode.auth === CONSTANT.FILE_AUTH.WRITE
                ) {
                    const deleteBtn = document.createElement("img");
                    deleteBtn.id = `${treeId}_${treeNode.id}_deleteBtn`;
                    deleteBtn.classList.add("tree_extra_deleteBtn");
                    deleteBtn.src = require("../Ztree/style/img/shanchu.svg");
                    deleteBtn.style.width = "15px";
                    deleteBtn.style.height = "15px";
                    deleteBtn.style.marginLeft = "5px";
                    deleteBtn.style.marginBottom = "12px";
                    deleteBtn.title = "删除";
                    deleteBtn.addEventListener("click", (e) => {
                        e.stopPropagation();
                        this.selectTreeNodeId = treeNode.tId;
                        this.$emit("onRemove", treeNode);
                    });
                    item.appendChild(deleteBtn);
                }
                let base_id = treeId.split("_").slice(0, 2).join("_");
                let baseObj = document.getElementById(base_id);
                let width = baseObj.clientWidth;
                let textNode = document.getElementById(treeNode.tId+"_span");
                if (textNode) {
                    let maxWidth = width - treeNode.level*22 - 135;
                    if (treeNode.isFolder) {
                        maxWidth = width - treeNode.level*22 - 115;
                    }
                    if (treeNode.auth !== CONSTANT.FILE_AUTH.WRITE) {
                        maxWidth = width - treeNode.level*22 - 70;
                    }
                    textNode.style.width = `${maxWidth}px`;
                    let iconNode = document.getElementById(treeNode.tId+"_ico");
                    if (iconNode) {
                        iconNode.style.marginBottom = "12px";
                    }
                }
                let aNode = document.getElementById(treeNode.tId+"_a");
                if (aNode) {
                    aNode.style.backgroundColor = "#f0f0f0";
                }
            },
            //移除节点后面的操作图标
            removeHoverDom(treeId, treeNode) {
                const item = document.getElementById(`${treeNode.tId}_a`);
                if (item) {
                    const updateBtn = item.querySelector(".tree_extra_btn");
                    const shareBtn = item.querySelector(".tree_extra_btn_add");
                    const deleteBtn = item.querySelector(".tree_extra_deleteBtn");
                    const historyBtn = item.querySelector('.tree_extra_historyBtn');
                    if (updateBtn) {
                        item.removeChild(updateBtn);
                    }
                    if (shareBtn) {
                        item.removeChild(shareBtn);
                    }
                    if (deleteBtn) {
                        item.removeChild(deleteBtn);
                    }
                    if (historyBtn) {
                        item.removeChild(historyBtn);
                    }
                    let base_id = treeId.split("_").slice(0, 2).join("_");
                    let baseObj = document.getElementById(base_id);
                    let width = baseObj.clientWidth;
                    let textNode = document.getElementById(treeNode.tId+"_span");
                    if (textNode) {
                        let maxWidth = width - 22*treeNode.level - 70;
                        textNode.style.width = `${maxWidth}px`;
    
                        let iconNode = document.getElementById(treeNode.tId+"_ico");
                        if (iconNode) {
                            iconNode.style.marginBottom = "12px";
                        }
                    }
                    let aNode = document.getElementById(treeNode.tId+"_a");
                    if (aNode) {
                        aNode.style.backgroundColor = "";
                    }
                }
            },
            addDiyDom(treeId, treeNode) {
                
            },
            asyncNodeDom(nodes, open) {
                
            },
            onNodeClick(e, treeId, treeNode) {
                if (!this.ztreeObj) {
                    return;
                }
                //单击展开树节点
                if (treeNode.children && treeNode.children.length > 0) {
                    if (treeNode.open) {
                        this.ztreeObj.expandNode(treeNode, false, false, false);
                    } else {
                        this.ztreeObj.expandNode(treeNode, true, false, false);
                    }
                }
            },
    
            }
        },
    };
    </script>
    
    <style scoped>
    </style>
    

     

     

    展开全文
  • vue2.0 组件 vue-ztree 技巧

    千次阅读 2018-07-11 14:14:09
    安装: npm install vueZtree --save-dev 引入 import vueZtree from &...https://github.com/lisiyizu/vue-ztree-2.0 注意事项 末尾都要有 children , 空数组也可以 业务: 这两个地方都可以控...
  • 主要介绍了Vue使用zTree插件封装树组件操作,结合实例形式分析了vue.js整合zTree插件实现树组件与使用相关操作技巧,需要的朋友可以参考下
  • Vue-zTree

    2019-10-05 12:14:41
    vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入: import "./js/jquery-3.3.1.min.js";import "../plugins/zTree/js/jquery.ztree.core.min.js";import "../plugins/zTree/js/jquery....
  • vue2 ztree 单选框

    2022-04-20 16:56:49
    vue2 ztree 单选框
  • 最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧。... vue-ztree(vue 1.0版本) 演示地址:http://lisiyizu.github.io/vue-zt...
  • vue-ztree-2.0 开源一个无限树组件, 仿造 ztree
  • 最近看了大神的关于vue-ztree的博客,感觉很赞,于是摘抄下来,方便自己学习,机智girl,哈哈哈O(∩_∩)O 最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太...
  • vue引入zTree入门

    万次阅读 热门讨论 2018-07-04 15:14:08
    vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入:import "./js/jquery-3.3.1.min.js"; import "../plugins/zTree/js/jquery.ztree.core.min.js"; import "../...
  • Ajax-v-ztree.zip

    2019-09-17 10:47:16
    Ajax-v-ztree.zip,vue2的简单树,支持单个或多个(选中)选择树,并支持服务器端数据,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的...
  • 创建项目 ztree-search3. 引入zTree4.代码实现5.参考资料 网上许多关于zTree模糊搜索高亮文本的都是jq写的,但是笔者有点强迫症很想用vue来实现,不想在vue的项目中写jq代码,所以自己参考别的高手的方法做了修改,...
  • ztreevue-cli中的使用

    2019-10-04 13:40:55
    ztree官网下载好文件包,将其中的css和js文件夹放到项目中某个文件夹下(最好新建,我这建了个plugins),然后项目中引入其中的jquery、css样式、js代码 我总共引用了这三个 @import '../../plugins/z...
  • 关于在Vue中使用ZTree

    2021-01-15 23:07:00
    在大数据量场景下Vue的数据监听机制决定了让渲染性能被降低,基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染,在IE浏览器(即便是IE11)中很容易导致页面卡死在,这个领域ztree是当之无愧最成熟的方案。...
  • zTree 是一个依靠 jQuery 实现的多功能 “树插件”。...机构 class=ztree-par> <i class=icon_org></i> <input type=text placeholder=请输入机构 id=ser v-model=ruleForm.mechanism @keyup.ent
  • vue项目使用ztree

    2021-04-09 14:02:48
    1、下载ztree ztree文档地址:http://www.treejs.cn/v3/api.php ztree下载地址:https://gitee.com/zTree/zTree_v3 2、将以下内容复制到项目中 3、将使用到的js文件和css文件引入到项目中 3.1、在main.js中引入...
  • Vue常用插件总结

    千次阅读 2019-07-18 13:36:07
    - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - ...
  • vue-cli常用插件集合

    2019-09-28 05:08:04
    element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,431
精华内容 572
关键字:

vue-ztree

友情链接: 启发式算法.zip