vue-huge-tree-oxr

vue-huge-tree

当数据量很大时, 树形图渲染会异常卡顿, 用户体验极差

本组件有效的解决了这个问题, 渲染速度比普通树形图提高 N 倍

海量数据建议不要放到 data 里，vue 依赖收集会导致内存占用过多。所以此插件没有使用 props 传递海量数据，而是通过 setData(data) 方法

Introductio

A based from shenxianhui/vue-huge-tree@1.0.4 ，
去除 node-sass，使用 sass，使用 element-ui 搜索框，过滤前收起展开项，添加至多选中限制默认 1000，使用 id, pId 作为唯一寻址提高渲染速度，样式动画调整

安装

npm i vue-huge-tree-oxr

引入

import VueHugeTree from 'vue-huge-tree-oxr';
import 'vue-huge-tree-oxr/dist/vue-huge-tree-oxr.css'

使用

<template>
    <huge-tree
                ref="huge-tree"
                show-checkbox
                show-search-bar
                show-node-count
                :expand-level="2"
                :expand-on-click-node="true"
                :default-checked-keys="checkedKeys"
                :search-method="searchMethod"
                @check="onClickCheckbox"
                @click-label="onClickLabel"
                @check-change="onChange"
                @node-click="onNodeClick"
    />
</template>

<script>
import HugeTree from 'vue-huge-tree-oxr';
import 'vue-huge-tree-oxr/dist/vue-huge-tree.css';

export default {
    components: {
        HugeTree
    },
    data() {
        return {
            checkedKeys: [],
            data: [
                {
                    id: '0',
                    label: 'ALL',
                    value: 'value_All',
                    pId: null,
                    children: Array.from(Array(10).keys(), v => ({
                        id: '0-' + v,
                        pId: '0',
                        label: 'label_' + v,
                        value: 'value_' + v,
                        children: Array.from(Array(1000).keys(), cv => ({
                            id: '0-' + v + '-' + cv,
                            pId: '0-' + v,
                            disabled: cv === 1,
                            label: 'label_' + v + '-' + cv,
                            value: 'value_' + v + '-' + cv
                        }))
                    }))
                }
            ]
        }
    },
    mounted() {
        this.getTreeData()
    },
    methods: {
        getTreeData() {
            this.$refs['huge-tree'].setData(this.data)
            this.checkedKeys = ['0-0', '0-1-1']
        },
        onClickCheckbox(node) {
            console.log('onClickCheckbox ~ node>>> :', node)
            console.log('------')
        },
        onClickLabel(node) {
            console.log('onClickLabel ~ node>>> :', node)
            console.log('------')
        },
        onChange(checkedKeys, checkedNodes) {
            console.log('onChange ~ checkedKeys>>> :', checkedKeys)
            console.log('onChange ~ checkedNodes>>> :', checkedNodes)
            const leafNode = checkedNodes.filter(n => n.isLeaf)
            console.log('onChange ~ leafNode>>> :', leafNode)
            console.log('------')
        },
        onNodeClick(node, e) {
            if (!node.isLeaf || node.disabled) return
            node.checked = !node.checked
            this.$refs['huge-tree'].onChecked(node)
        },
        searchMethod(keywords, { value, label }) {
            return keywords.some(
                keyword =>
                    value.toLowerCase().includes(keyword.toLowerCase()) ||
                    label.toLowerCase().includes(keyword.toLowerCase())
            )
        }
    }
};
</script>

Attributes

Methods

Events

Scoped Slot

数据结构

节点结构