vue-easytable

Английский | Китайский

Спонсоры

Поддержите этот проект, став спонсором. Ваш логотип или имя будут отображаться здесь с предоставленной вами ссылкой. Станьте спонсором

Золотой спонсор

Серебряный спонсор

Щедрый спонсор

Введение

Мощная таблица данных на основе Vue 2.x. Вы можете использовать её как сетку данных, Microsoft Excel или Google Sheets. Поддерживает виртуальное прокручивание, редактирование ячеек и т.д.

Характеристики

Поддержка отображения до 300 000 строк данных через виртуальное прокручивание
Бесплатна навсегда. Конечно, вы также можете выбрать пожертвование## API и примеры
Официальная документация (GitHub)
Официальная документация (Китай)

ВозможностиОсновные компоненты

Компонент таблицы

Если вам недостает какой-либо функциональности, пожалуйста, сообщите нам.## Установка

npm install vue-easytable

или

yarn add vue-easytable

Использование

Добавьте следующее в main.js:

import Vue from "vue";
import "vue-easytable/libs/theme-default/index.css";
import VueEasytable from "vue-easytable";

Vue.use(VueEasytable);

new Vue({
    el: "#app",
    render: (h) => h(App),
});

Пример:

<template>
  <ve-table :columns="columns" :table-data="tableData" />
</template>

<script>
export default {
    data() {
        return {
            columns: [
                { field: "name", key: "a", title: "Имя", align: "center" },
                { field: "date", key: "b", title: "Дата", align: "left" },
                { field: "hobby", key: "c", title: "Хобби", align: "right" },
                { field: "address", key: "d", title: "Адрес" }
            ],
            tableData: [
                {
                    name: "Джон",
                    date: "1900-05-20",
                    hobby: "кодирование и повторение кодирования",
                    address: "ул. Центральная, дом 1, Шанхай"
                },
                {
                    name: "Дикерсон",
                    date: "1910-06-20",
                    hobby: "кодирование и повторение кодирования",
                    address: "ул. Центральная, дом 1, Пекин"
                },
                {
                    name: "Ларсен",
                    date: "2000-07-20",
                    hobby: "кодирование и повторение кодирования",
                    address: "ул. Центральная, дом 1, Чунцин"
                },
                {
                    name: "Женева",
                    date: "2010-08-20",
                    hobby: "кодирование и повторение кодирования",
                    address: "ул. Центральная, дом 1, Ксиамэнь"
                },
                {
                    name: "Джами",
                    date: "2020-09-20",
                    hobby: "кодирование и повторение кодирования",
                    address: "ул. Центральная, дом 1, Шеньян"
                }
            ]
        };
    }
};
</script>