vue vxe-tree 树组件加载大量节点数据，虚拟滚动的用法

查看官网：https://vxeui.com
gitbub：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui

上万节点数据

当数据量达到上万时，通过数据双向绑定将会影响性能，可以通过调用 loadData 来加载数据

<template>
  <div>
    <vxe-button status="primary" @click="expandAllEvent">展开所有</vxe-button>
    <vxe-button status="primary" @click="clearAllEvent">关闭所有</vxe-button>

    <vxe-tree ref="treeRef" v-bind="treeOptions"></vxe-tree>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const treeRef = ref()

const treeOptions = reactive({
  loading: false,
  height: 400,
  transform: true,
  showCheckbox: true,
  titleField: 'name'
//  默认启用  
//  virtualYConfig: {
//    enabled: true,
//    gt: 0
//  }
})

const loadList = () => {
  treeOptions.loading = true
  fetch('/resource/json/provinces_list.json').then(res => res.json()).then((data) => {
    treeOptions.loading = false
    const $tree = treeRef.value
    if ($tree) {
      $tree.loadData(data)
    }
  })
}

const expandAllEvent = () => {
  const $tree = treeRef.value
  if ($tree) {
    $tree.setAllExpandNode(true)
  }
}
const clearAllEvent = () => {
  const $tree = treeRef.value
  if ($tree) {
    $tree.setAllExpandNode(false)
  }
}

loadList()
</script>

连接线

<template>
  <div>
    <vxe-tree :data="treeList" transform show-checkbox show-line></vxe-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeList = ref([
  { title: '节点2', id: '2', parentId: null },
  { title: '节点3', id: '3', parentId: null },
  { title: '节点3-1', id: '31', parentId: '3' },
  { title: '节点3-2', id: '32', parentId: '3' },
  { title: '节点3-2-1', id: '321', parentId: '32' },
  { title: '节点3-2-2', id: '322', parentId: '32' },
  { title: '节点3-3', id: '33', parentId: '3' },
  { title: '节点3-3-1', id: '331', parentId: '33' },
  { title: '节点3-3-2', id: '332', parentId: '33' },
  { title: '节点3-3-3', id: '333', parentId: '33' },
  { title: '节点3-4', id: '34', parentId: '3' },
  { title: '节点4', id: '4', parentId: null },
  { title: '节点4-1', id: '41', parentId: '4' },
  { title: '节点4-1-1', id: '411', parentId: '42' },
  { title: '节点4-1-2', id: '412', parentId: '42' },
  { title: '节点4-2', id: '42', parentId: '4' },
  { title: '节点4-3', id: '43', parentId: '4' },
  { title: '节点4-3-1', id: '431', parentId: '43' },
  { title: '节点4-3-2', id: '432', parentId: '43' },
  { title: '节点5', id: '5', parentId: null }
])
</script>

过滤节点

通过 filter-value 就可以设置过滤功能，通过 filter-config.autoExpandAll 来设置过滤后自动展开与收起

<template>
  <div>
    <div>
      <vxe-input v-model="treeOptions.filterValue" type="search" clearable></vxe-input>
    </div>

    <vxe-tree v-bind="treeOptions"></vxe-tree>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const treeOptions = reactive({
  transform: true,
  filterValue: '',
  filterConfig: {
    autoExpandAll: true
  },
  data: [
    { title: '节点2', id: '2', parentId: null },
    { title: '节点3', id: '3', parentId: null },
    { title: '节点3-1', id: '31', parentId: '3' },
    { title: '节点3-2', id: '32', parentId: '3' },
    { title: '节点3-2-1', id: '321', parentId: '32' },
    { title: '节点3-2-2', id: '322', parentId: '32' },
    { title: '节点3-3', id: '33', parentId: '3' },
    { title: '节点3-3-1', id: '331', parentId: '33' },
    { title: '节点3-3-2', id: '332', parentId: '33' },
    { title: '节点3-3-3', id: '333', parentId: '33' },
    { title: '节点3-4', id: '34', parentId: '3' },
    { title: '节点4', id: '4', parentId: null },
    { title: '节点4-1', id: '41', parentId: '4' },
    { title: '节点4-1-1', id: '411', parentId: '42' },
    { title: '节点4-1-2', id: '412', parentId: '42' },
    { title: '节点4-2', id: '42', parentId: '4' },
    { title: '节点4-3', id: '43', parentId: '4' },
    { title: '节点4-3-1', id: '431', parentId: '43' },
    { title: '节点4-3-2', id: '432', parentId: '43' },
    { title: '节点5', id: '5', parentId: null }
  ]
})
</script>

https://gitee.com/x-extends/vxe-pc-ui