vxe-table 如何使用树层级结构并开启虚拟滚动

vxe-table 如何使用树层级结构并开启虚拟滚动,默认情况下 vxe-table 是支持平级树结构开启虚拟滚动的,会自动转成树结构,但是有时候后端返回的数据是树层级,不是平级。这时候就可以用数据拍平方法实现。

查看官网:https://vxetable.cn

gitbub:https://github.com/x-extends/vxe-table

gitee:https://gitee.com/x-extends/vxe-table

html 复制代码
<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import XEUtils from 'xe-utils'

const gridOptions = reactive({
  border: true,
  treeConfig: {
    rowField: 'id',
    childrenField: 'children'
  },
  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: []
})

const dataList = [
  {id: 10000, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
  {
    id: 10050,
    name: 'Test2',
    type: 'mp4',
    size: 0,
    date: '2021-04-01',
    children: [
      {
        id: 24300,
        name: 'Test3',
        type: 'avi',
        size: 1024,
        date: '2020-03-01',
        children: [
          { id: 20045, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
          {
            id: 10053,
            name: 'Test5',
            type: 'avi',
            size: 0,
            date: '2021-04-01',
            children: [
              { id: 24330, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
              { id: 21011, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
              { id: 22200, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 23666,
    name: 'Test9',
    type: 'xlsx',
    size: 2048,
    date: '2020-11-01',
    children: [
      {
        id: 23677,
        name: 'Test10',
        type: 'js',
        size: 1024,
        date: '2021-06-01',
        children: [
          { id: 23671, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
          { id: 23672, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' }
        ]
      },
      {
        id: 23688,
        name: 'Test13',
        type: 'js',
        size: 1024,
        date: '2021-06-01',
        children: [
          { id: 23681, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
          { id: 23682, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' }
        ]
      }
    ]
  },
  {
    id: 24555,
    name: 'Test16',
    type: 'avi',
    size: 224,
    date: '2020-10-01',
    children: [
      { id: 24566, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
      { id: 24577, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
    ]
  }
]
// 使用函数库工具类处理数据
gridOptions.data = XEUtils.toTreeArray(dataList, { children: 'children', key: 'id', parentKey: 'parentId' })
</script>

https://gitee.com/x-extends/vxe-table

相关推荐
neon12043 分钟前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
李长鸿3 小时前
vue3中的插槽和其他
vue.js
jqq6663 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
知识分享小能手7 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
webYin14 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
Gazer_S15 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客17 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
用户516816614584119 小时前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
熊猫片沃子19 小时前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
拜无忧20 小时前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite