vxe-table

Русская версия | Китайская версия | Английская версия | Японская версия

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

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

Последняя версия ✔	Последняя версия ✔	Последняя версия ✔	Последняя версия ✔	Последняя версия ✔

Возможности

• Базовая таблица
• Настройка сетки
• Штрихпунктирная линия
• Контурная таблица
• Стили ячеек
• Изменение ширины колонок
• Минимальная/максимальная высота
• Изменение высоты и ширины
• Замороженные колонки
• Группировка заголовков
• Подвал
• Выделение строк и колонок
• Номер строки
• Одиночное выделение
• Множественное выделение
• Сортировка
• Многоколоночная сортировка
• Фильтрация
• Объединение ячеек
• Объединение подвала
• Импорт, экспорт, печать
• Показ/скрытие колонок
• Перетаскивание колонок
• Состояние загрузки
• Форматирование ячеек
• Слоты — шаблоны
• Контекстное меню
• Детали — раскрывающиеся строки
• Инструментальная панель
• Виртуальное дерево
• Редактирование CRUD
• Проверка данных
• Агент данных
• Навигация клавишами
• VxeGlobalRenderer
• Виртуальный скроллинг
• Виртуальное объединение
• Темы 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 в продакшне, поскольку соединение может быть прервано в любой момент

<!-- Стили -->
<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>
<!-- Таблица -->
<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="Номер" width="60"></vxe-column>
      <vxe-column field="name" title="Имя"></vxe-column>
      <vxe-column field="role" title="Роль"></vxe-column>
      <vxe-colgroup title="Группа 1">
        <vxe-column field="gender" title="Пол"></vxe-column>
        <vxe-column field="address" title="Адрес"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

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

const tableData = ref([
  { id: 10001, name: 'Тест 1', role: 'Разработчик', gender: 'Мужской', address: 'Шэньжень' },
  { id: 10002, name: 'Тест 2', role: 'Тестировщик', gender: 'Мужской', address: 'Гуанчжоу' },
  { id: 10003, name: 'Тест 3', role: 'Проектный менеджер', gender: 'Мужской', address: 'Шанхай' }
])
</script>

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

👉 UI документация
👉 Таблица документация

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

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

npm run update

Запустите локальное тестирование

npm run serve

Скомпилировать и собрать, создать каталог сборки es, lib

npm run lib

Вкладчики

Благодарим всех, кто вносил свой вклад в этот проект.

Лицензия

MIT © 2019-present, Xu Liangzhan