vue-easytable

English | Русский

Поддержка проекта

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

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

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

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

Описание

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

Возможности

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

Поддерживаемые возможностиОсновные компоненты

Компонент Table

Если вы хотите какую-либо функцию, которой нет в списке, сообщите нам## Установка

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>