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

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

查看官网:vxeui.com

gitbub:github.com/x-extends/v...

gitee:gitee.com/x-extends/v...

上万节点数据

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

html 复制代码
<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>

连接线

html 复制代码
<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 来设置过滤后自动展开与收起

html 复制代码
<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>

gitee.com/x-extends/v...

相关推荐
回忆哆啦没有A梦25 分钟前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__1 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生1 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
小菜全3 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
真的想不出名儿6 小时前
vue项目引入字体
前端·javascript·vue.js
笨蛋不要掉眼泪6 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
奶糖 肥晨9 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
belldeep10 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django
正义的大古11 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers
薄雾晚晴11 小时前
大屏开发实战:封装自动判断、无缝衔接的文字滚动组件,告别文本截断烦恼
前端·javascript·vue.js