今天看啥  ›  专栏  ›  Spdino

安利一款基于element的大数据树形表格

Spdino  · 掘金  ·  · 2019-06-20 11:49
阅读 51

安利一款基于element的大数据树形表格

项目介绍

一款基于element-ui(2.9.1)改写的支持树形表格的大数据表格组件

❤️ 直接怼地址

github: github.com/Spdino/vbt-…

看看前端的小伙伴能不能给颗星呢, 哈哈,欢迎提交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)
复制代码

局部: 在组件中:

<template>
    <vbt-table border
               stripe
               row-key="id"
               size="mini"
               isBigData
               isTreeTable
               lazy
               :load="load"
               highlight-hover-row
               max-height="600"
               :data="tableData">
      <vbt-table-column prop="id"
                        label="ID"
                        width="200"
                        fixed="left">
      </vbt-table-column>
      <vbt-table-column prop="name"
                        label="Name"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="sex"
                        label="Sex"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="age"
                        label="Age"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="role"
                        label="role"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="language"
                        label="language"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="rate"
                        label="rate"
                        width="200">
      </vbt-table-column>
      <vbt-table-column prop="address"
                        label="Address"
                        fixed="right"
                        show-overflow-tooltip
                        min-width="300">
      </vbt-table-column>
    </vbt-table>
</template>

<script>
import {vbtTable,vbtTableColumn} from 'vbt-table'

function mockData(num, cId) {
  let fullIndex = 0
  const list = []
  for (let index = 0; index < num; index++) {
    fullIndex++
    cId && (cId = Number(cId) + 1)
    list.push({
      id: cId || fullIndex,
      hasChildren: cId > 1000000 ? false : true,
      // children: !cId ? mockData(30, `${fullIndex}0000000`) : [],
      role: 'role_' + fullIndex,
      language: index % 2 === 0 ? 'zh_CN' : 'en_US',
      name: 'name_' + fullIndex,
      sex: index % 3 ? '男' : '女',
      age: 18,
      rate: 5,
      address: `地址 地址地址 地址地址 址地址址地址 址地址 址地址  址地址 址地址  址地址 址地址址地址址地址 地址${index}`
    })
  }
  return list
}
export default {
  components: { vbtTable, vbtTableColumn },

  data() {
    return {
      tableData: mockData(1000)
    }
  },

  methods: {
    load(row, resolve) {
      setTimeout(() => {
        resolve(mockData(30, `${row.id}000`))
      }, 1000)
    }
  }
}
</script>

复制代码



原文地址:访问原文地址
快照地址: 访问文章快照