项目介绍
一款基于element-ui(2.9.1)改写的支持树形表格的大数据表格组件
❤️ 直接怼地址
github:
看看前端的小伙伴能不能给颗星呢， 哈哈，欢迎提交BUG和各种建议，讨论····
? 说明
- 渲染树形数据时，必须要指定 row-key和isTreeTable属性， row 中包含 children字段。
- 支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
- children 与 hasChildren 都可以通过 tree-props 配置。
- 大数据滚动渲染需指定isBigData属性,支持树形表格大数据.
- 树形表格支持多级嵌套.
- 其它用法和elment-ui的table组件一样
? 新增 Table Attributes
| 参数 | 说明 | 参数 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| initParentFunc | 用于初始化父级树形表格数据时处理数据 | row,treeData | Function | — | — |
| formateChildFunc | 展示子级树形表格数据时处理数据 | row,parentRow,treeData | Function | — | — |
| isBigData | 大数据滚动渲染 | — | Boolean | — | — |
| isTreeTable | 树形表格 | — | Boolean | — | — |
- initParentFunc方法，用于初始化父级树形表格数据时处理数据，抛出当前处理的父级rowData
// 设置父级初始值 initParentFunc(row) { console row.disabled = true.log(row) },复制代码 - formateChildFunc方法，用于初始化子级树形表格数据时处理数据，抛出当前处理的子级rowData和parentRow
formateChildFunc(row, parent) { console.log(row,parent) if(parent.name) row.name = parent.name },复制代码 ✨ Demo
1.大数据支持
- 效果
2.大数据树形表格支持
- 效果
3.大数据树形表格懒加载支持
- 效果
? 用法
安装： yarn add vbt-table -S || npm install vbt-table -S
全局：在main.js中:
import Vue from 'vue'import vbtTable from 'vbt-table'Vue.use(vbtTable)复制代码
局部： 在组件中:
复制代码