Amway — это древовидная форма больших данных, основанная на элементах.

Vue.js

Введение в проект

Компонент таблицы больших данных, поддерживающий древовидные таблицы на основе element-ui (2.9.1).

❤️ Обращайтесь напрямую по адресу

github: GitHub.com/SP-no/VB-вопрос-…

Посмотрим, смогут ли фронтенд-друзья ставить звезды, ха-ха, добро пожаловать, чтобы отправлять сообщения об ошибках и различные предложения для обсуждения...

📅 Описание

  • При рендеринге данных дерева необходимо указать атрибуты row-key и isTreeTable, а row содержит дочернее поле.
  • Поддерживает асинхронную загрузку данных дочернего узла. Установите для свойства lazy таблицы значение true и загрузите функцию load . Укажите, какие строки содержат дочерние элементы, указав поле hasChildren в строке.
  • И дочерние элементы, и hasChildren можно настроить с помощью свойств дерева.
  • Атрибут isBigData необходимо указать для рендеринга больших данных с прокруткой, который поддерживает большие данные в виде древовидной таблицы.
  • Древовидная таблица поддерживает несколько уровней вложенности.
  • Другое использование такое же, как и у табличного компонента element-ui.

🎲 Добавлены атрибуты таблицы

параметр иллюстрировать параметр Типы необязательное значение По умолчанию
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)
    },
  • Метод formatChildFunc используется для обработки данных при инициализации данных таблицы дочернего дерева и выдает обрабатываемые в данный момент дочерние данные rowData и parentRow.
    formateChildFunc(row, parent) {
     console.log(row,parent)
     if(parent.name) row.name = parent.name
    },

✨ Демо

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>
Категории