vxe-table-plugin-virtual-tree-fl
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

vxe-table-plugin-virtual-tree

gitee star npm version npm downloads npm license

基于 vxe-table 的表格插件,实现简单的虚拟树表格(属于内测阶段,谨慎使用)

Installing

npm install xe-utils vxe-table vxe-table-plugin-virtual-tree
// ...
import VXETable from 'vxe-table'
import VXETablePluginVirtualTree from 'vxe-table-plugin-virtual-tree'
import 'vxe-table-plugin-virtual-tree/dist/style.css'
// ...

VXETable.use(VXETablePluginVirtualTree)

Compatibility

  • 功能点

    • 继承 Grid 基本功能
  • 注意事项

    • 虚拟树的实现机制是污染式的,会污染数据源(给数据源自动增加额外的属性,用于编译成高性能的虚拟渲染所需要的参数)
    • 虚拟树的操作同样也是污染式的,通过 insert 或 remove 相关方法也会改变数据源
  • 不支持的参数

    • table.keep-source
    • table.tree-config.line
    • table.tree-config.reserve
    • table.expand-config
    • table.span-method
    • table.footer-span-method
    • column.type = expand

Demo

<vxe-virtual-tree
  show-overflow
  row-key
  height="300"
  row-id="id"
  :data="tableData"
  :tree-config="{children: 'children'}"
  :columns="tableColumn">
</vxe-virtual-tree>
export default {
  data () {
    return {
      tableColumn: [
        { field: 'name', title: 'Name', treeNode: true },
        { field: 'size', title: 'Size' },
        { field: 'type', title: 'Type' },
        { field: 'date', title: 'Date' }
      ],
      tableData: [
        { id:'101', name:'文档1', size: 12, type: 'xlsx', date: '2019-12-12' },
        {
          id:'102',
          name:'文件夹',
          size: 12,
          type: '',
          date: '2019-12-12',
          children: [
            { id:'103', name:'文档3', size: 12, type: 'avi', date: '2019-12-12' },
          ]
        }
      ]
    }
  }
}

License

MIT © 2019-present, Xu Liangzhan

Package Sidebar

Install

npm i vxe-table-plugin-virtual-tree-fl

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

187 kB

Total Files

10

Last publish

Collaborators

  • shanshan10