vue-larger-tree

A tree component that can load large amounts of data(Based on element-ui).

Install

$ npm i vue-larger-tree -S

$ yarn add vue-larger-tree -S

Use

import Vue from "vue";
import VueLargerTree from "vue-larger-tree";
import "vue-larger-tree/dist/index.css";

Vue.use(VueLargerTree);

Props

list

Type: Array Required: true origin data.

<VueLargerTree :list="[]">

node-key

Type: String Required: true Unique key for every data.

<VueLargerTree :list="[]" node-key="categoryCode">

height

Type: String Required: false Default: 480 component height.

<VueLargerTree :list="[]" node-key="categoryCode" height="500">

show-checkbox

Type: Boolean Required: false Default: false show component checkbox.

<VueLargerTree :list="[]" node-key="categoryCode" height="500" show-checkbox>

defaultExpandAll

Type: Boolean Required: false Default: false expand all node.

<VueLargerTree :list="[]" defaultExpandAll>

defaultExpandedKeys

Type: Array Required: false Default: [] default expanded keys list.

<VueLargerTree :list="[]" :defaultExpandedKeys="[]">

props

Type: Object Required: false Default: {children:'children',label:'categoryName'} keyword of attribute value. like element-ui.

<VueLargerTree :list="[]" :props="{}">

check

Type: Function Required: false like element-ui.tree.check

<VueLargerTree @check="handleCheck">

node-click

Type: Function Required: false like element-ui.tree.node-click

<VueLargerTree @node-click="handleNodeClick">

filterNodeMethod

Type: Function Required: false like element-ui.tree.filterNodeMethod

<VueLargerTree :filterNodeMethod="handleFilterMethods">

example

<template>
  <div id="app">
    <el-input v-model="searchValue" />
    <VueLargerTree
      ref="tree"
      :list="list"
      node-key="categoryCode"
      height="500"
      show-checkbox
      @node-click="handleNodeClick"
      @check="handleCheck"
      :filterNodeMethod="handleFilterMethods"
    >
      <template v-slot="{ data }">
        <span>{{ data.title }}</span>
      </template>
    </VueLargerTree>
  </div>
</template>

<script>
import { Input } from 'element-ui';
export default {
  name: 'App',
  data() {
    return {
      searchValue: '',
      expandedList: ['index'],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'title',
      },
    };
  },
  watch: {
    searchValue(newVal) {
      this.$refs.tree.filter(newVal);
    },
  },
  methods: {
    handleCheck(checkedNodes, checkedKeys) {
      console.log('checkedNodes', checkedNodes);
      console.log('checkedKeys', checkedKeys);
    },
    handleNodeClick(e) {
      console.log('handleNodeClick', e);
    },
    handleFilterMethods(keyword, val) {
      return val.categoryName.includes(keyword);
    },
  },

  mounted() {
    const load = (level) => {
      const list = [];
      for (let i = 0; i < 100; i++) {
        const treeNode = {
          key: `${level}-${i}`,
          title: `${level}-${i}`,
          level,
          children: [],
        };
        if (level === 0) {
          treeNode.children = load(level + 1);
        }
        list.push(treeNode);
      }
      return list;
    };
    this.list = load(0);
  },

  components: { ElInput: Input },
};
</script>