vue vxe-tree 树组件加载大量节点数据，虚拟滚动的用法
<p>vue vxe-tree 树组件加载大量节点数据，虚拟滚动的用法</p><p>查看官网：https://vxeui.com<br>
gitbub：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<h2 id="上万节点数据">上万节点数据</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250714111830638-973020534.gif"></p>
<p>当数据量达到上万时，通过数据双向绑定将会影响性能，可以通过调用 loadData 来加载数据</p>
<pre><code class="language-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>
</code></pre>
<h2 id="连接线">连接线</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250714111847589-1596412455.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202507/3563285-20250714111855919-1006792459.png"></p>
<pre><code class="language-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>
</code></pre>
<h2 id="过滤节点">过滤节点</h2>
<p>通过 filter-value 就可以设置过滤功能，通过 filter-config.autoExpandAll 来设置过滤后自动展开与收起<br>
<img src="https://i-blog.csdnimg.cn/direct/c611fa592e0c4a7684f2913fe4d915d3.png"></p>
<pre><code class="language-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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/18983622
頁:
[1]