ajax请求的五个步骤 ztree异步加载数据


ajax请求的五个步骤 ztree异步加载数据

文章插图
今天给大家分享一款超棒的Vue海量数据渲染树形组件VueGiantTree 。
vue-giant-tree 基于 ztree 封装的Vue树形组件 。轻松实现大数据高性能渲染,适合海量数据渲染场景 。
zTree简介一个依靠 jQuery 实现的多功能 “树插件” 。star高达3.7K+ 。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点 。
特性
zTree v3.0 支持核心代码按需加载采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器支持JSON、静态 和 Ajax 异步加载节点数据支持任意更换皮肤 / 自定义图标(依靠css)支持极其灵活的 checkbox 或 radio 选择功能提供多种事件响应回调灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟在一个页面内可同时生成多个 Tree 实例简单的参数配置实现 灵活多变的功能http://www.treejs.cn/https://github.com/zTree/zTree_v3以上就是ztree.js的简单介绍,需要了解更多可以自行去官网查阅文档 。
为什么需要vue-giant-tree
Vue的数据监听机制决定了在大数据量场景下的渲染性能非常低下,基于Vue实现的常规树组件几乎无法胜任上万条数据的高性能渲染,在IE浏览器中很容易导致页面卡死甚至浏览器崩溃 。
vue-giant-tree 直接基于ztree做上层封装,能高效的渲染海量数据 。
安装
$ npm i vue-giant-tree -S使用插件
<template><div class="wrap-tree"><tree :nodes="nodes" /></div></template><script>import tree from "vue-giant-tree";export default {components: {tree},data() {return {nodes: [{ id:1, pid:0, name:"随意勾选 1", open:true},{ id:11, pid:1, name:"随意勾选 1-1", open:true},{ id:111, pid:11, name:"随意勾选 1-1-1"},{ id:112, pid:11, name:"随意勾选 1-1-2"},{ id:12, pid:1, name:"随意勾选 1-2", open:true},{ id:121, pid:12, name:"随意勾选 1-2-1"},{ id:122, pid:12, name:"随意勾选 1-2-2"},{ id:2, pid:0, name:"随意勾选 2", checked:true, open:true},{ id:21, pid:2, name:"随意勾选 2-1"},{ id:22, pid:2, name:"随意勾选 2-2", open:true},{ id:221, pid:22, name:"随意勾选 2-2-1", checked:true},{ id:222, pid:22, name:"随意勾选 2-2-2"},{ id:23, pid:2, name:"随意勾选 2-3"}]}}}</script>附上示例及项目地址
# demo地址https://refined-x.com/Vue-Giant-Tree/# 仓库地址https://github.com/tower1229/Vue-Giant-Treeok,就分享到这里 。希望能对大家有所帮助,欢迎一起交流分享哈!


    以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: