Project introduction

A big data table component based on element-UI (2.9.1) rewritten to support tree tables

❤️

Making: github.com/Spdino/vbt-…

Let’s see if our friends can give us a star. Haha, welcome to submit bugs and suggestions for discussion

📅 instructions

  • When rendering tree data, row-key and isTreeTable attributes must be specified. Row contains the children field.
  • Supports asynchronous data loading of child nodes. Set the lazy attribute of the Table to true with the load function. Specify which rows contain child nodes by specifying the hasChildren field in row.
  • Both children and hasChildren can be configured using tree-props.
  • The isBigData attribute must be specified for scrolling rendering of big data, which supports big data in tree tables.
  • Tree tables support multiple levels of nesting.
  • Other uses are the same as for the table component of Elment – UI

🎲 Added Table Attributes

parameter instructions parameter type An optional value The default value
initParentFunc Used to process data when initializing parent tree table data row,treeData Function – –
formateChildFunc Process data when displaying subtree table data row,parentRow,treeData Function – –
isBigData Big data scrolling rendering – Boolean – –
isTreeTable The tree form – Boolean – –
scrollYRenderConfig Configuration options for big data scrolling – Object RenderSize: How many pieces of data are rendered at one time; OffsetSize: How many pieces of data to pre-render { renderSize: 30, offsetSize: 10 }
  • InitParentFunc method, used to process data when initializing the parent tree table data, and throws the currently processed parent rowData
InitParentFunc (row) {console row.disabled = true. Log (row)},Copy the code
  • The formateChildFunc method, used to process the data when initializing the child tree table data, throws the currently processed child rowData and parentRow
    formateChildFunc(row, parent) {
     console.log(row,parent)
     if(parent.name) row.name = parent.name
    },
Copy the code

✨ Demo

1. Big data support
  • The effect
2. Big data tree table support
  • The effect
3. Lazy loading of big data tree tables is supported
  • The effect

🐶 usage

Installation: yarn add VBT – table – S | | NPM install VBT – table – S

Global: in main.js:

import Vue from 'vue'
import vbtTable from 'vbt-table'
Vue.use(vbtTable)
Copy the code

2. In a component:

<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 ? 'male' : 'woman', the age: 18, rate: 5, address: ` address Address in the address Address in the address Site address address Site address address address address site address Address address site address 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>

Copy the code