vxe-table

Китайский (упрощённый) | Китайский (традиционный) | Английский | Японский

PC-компонент формы/таблицы на основе vue, поддерживающий CRUD, виртуальные деревья, перетаскивание столбцов, ленивая загрузка, быстрое меню, проверку данных, импорт/экспорт/печать, отрисовку форм, пользовательские шаблоны, рендереры, конфигурацию JSON...

• Концепция дизайна

  • Ориентирован на современные браузеры, эффективный и простой API Yöntemler
  • Модульные таблицы, загрузка по требованию
  • Проектирован для одиночной строки редактирования таблицы, поддерживает CRUD и больше расширений, мощные возможности при сохранении производительности

• Планы

  • v1.0 на базе vue2.6, поддерживает все основные браузеры, реализует все полезные функции таблицы
  • v2.0 на базе vue2.6, поддерживает все основные браузеры, обеспечивает как функциональность, так и производительность
  • v3.0 на базе vue2.6+, поддерживает современные браузеры и совместимость с IE11
  • v3.9 на базе vue2.6+, переработка и разделение компонентов, разделены на Vxe table и Vxe UI, будут поддерживать визуализацию компонентов
  • v4.0 на базе vue3.2+, поддерживает только современные браузеры, не поддерживает IE
  • v4.7 на базе vue3.2+, переработка и разделение компонентов, разделены на Vxe table и Vxe UI, будут поддерживать визуализацию компонентов
  • следующий этап: режим рендера sticky, повышение до максимума виртуального прокрутки, динамическая высота строк виртуальной прокрутки, визуализация данных и графиков

Поддержка браузеров

80+ ✔	80+ ✔	90+ ✔	75+ ✔	10+ ✔

Функциональные возможности

• Базовая таблица
• Настройка таблицы
• Штрихи зебры
• Разные рамки
• Стили ячеек
• Перетаскивание ширин столбцов
• Минимальная/максимальная высота
• Адаптивная ширина/высота
• Фиксированные столбцы
• Множественные заголовки
• Данные в нижней части таблицы
• Выделение строк или колонок
• Номера
• Чекбоксы
• Чекбоксы множественного выбора
• Сортировка
• Множественная сортировка
• Фильтрация
• Объединение ячеек
• Объединение нижней части таблицы
• Импорт/Экспорт/Печать
• Отображение/Скрытие колонок
• Перетаскивание/Перестановка колонок
• Загрузка...
• Форматирование содержимого
• Пользовательские слоты - шаблоны
• Быстрое меню
• Раскрытие строк
• Инструментальная панель
• Виртуальное дерево
• CRUD
• Проверка данных
• Прокси данных
• Навигация клавишами
• Рендереры
• Виртуальная прокрутка
• Виртуальное объединение
• Темы через CSS переменные
• (Enterprise Edition) Выделение областей ячеек
• (Enterprise Edition) Копирование/вставка ячеек
• (Enterprise Edition) Поиск и замена в ячейках
• (Enterprise Edition) Полностью клавишное управление

Установка

Версия: vue 3.x

npm install vxe-table@next

Получите на unpkg и cdnjs

NPM

Только использование таблицы

// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

createApp(App).use(VxeTable).mount('#app')

Использование таблицы и библиотеки UI

// ...
import VxeTable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
// ...

createApp(App).use(VxeUI).use(VxeTable).mount('#app')

CDN

Используйте сторонние CDN методы, запомните версию, чтобы избежать влияния некомпетентных обновлений
Не рекомендуется использовать сторонние CDN адреса в рабочих средах, поскольку этот соединение может потеряться в любое время

<!-- style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- table -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>

Примеры

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  { id: OnClickListener, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
  { id: OnClickListener, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
  { id: OnClickListener, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
</script>

Онлайн документация

👉 Документация компонента
👉 Документация таблицы

Группа общения QQ

Эта группа предназначена для обсуждения проблем. Если количество участников достигнет максимального значения, нерегулярно будут удаляться менее активные участники.

Запуск проекта

Установка зависимостей

npm run update

Запуск локальной отладки

npm run serve

Сборка проекта, создание каталога с компилированными файлами: es, lib

npm run lib

Авторы

Большое спасибо всем, кто принимал участие в этом проекте.

Лицензия

MIT © 2019–present, Xu Liangzhan