安利一款基於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	—	—
scrollYRenderConfig	大數據滾動的配置選項	—	Object	renderSize：一次渲染多少條數據；offsetSize：預渲染多少條數據	{ renderSize: 30, offsetSize: 10 }

• 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>

複製代碼