Vxe UI vue vxe-table 虚拟树表格的使用，流畅的渲染万级数据树结构表格

最新推荐文章于 2025-01-09 12:01:37 发布

仰望.

最新推荐文章于 2025-01-09 12:01:37 发布

阅读量1.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vxe-ui 文章标签： vxe-table

本文链接：https://blog.csdn.net/abc26296/article/details/143212100

Vxe UI vue vxe-table 虚拟树表格的使用，流畅的渲染万级数据树结构表格

代码

普通树表格，一般存数据库里都是平级数据，vxe-table 的树渲染这就非常友好了，只有带有父子id关联的数组，就可以自动渲染树表格。
在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import {
     
      reactive } from 'vue'
const gridOptions = reactive({
     
     
  border: true,
  treeConfig: {
     
     
    transform: true, // 开启自动转换，如果为 false 则需要传带有 children 的树结构
    rowField: 'id', // 行 key
    parentField: 'parentId' // 父级行 key
  },
  columns: [
    {
     
      type: 'seq', width: 70 },
    {
     
      field: 'name', title: 'Name', minWidth: 300, treeNode: true },
    {
     
      field: 'size', title: 'Size' },
    {
     
      field: 'type', title: 'Type' },
    {
     
      field: 'date', title: 'Date' }
  ],
  data: [
    {
     
      id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
    {
     
      id: 10050, parentId

最低0.47元/天解锁文章

200万优质内容无限畅学