@easytable/vue NPM

@easytable/vue

!WARNING 本仓库迁移自 vue-easytable Vue.js 2.x ，基于 Vue.js 3.x 重构中，目前基本完成。

English | 中文

介绍

一个强大的 vue3.x 表格组件。你可以将它用做数据表、微软 excel 或者 goole sheet. 支持虚拟滚动、单元格编辑等功能。

!IMPORTANT 如果您正在使用 Vue2.x ，请使用 vue-easytable 组件库。

特点

采用虚拟滚动技术，支持 30 万行数据展示
永久免费。当然你也可以选择捐赠

API & 文档

功能支持

基础组件

Table 组件

如果没有你想要的的功能，请告诉我们

安装

pnpm install @easytable/vue

yarn add @easytable/vue

使用

Write the following in main.js:

import { createApp } from 'vue';
import '@easytable/vue/libs/theme-default/index.css';
import { useVeTable } from '@easytable/vue';

createApp({
  render: (h) => h(App),
})
.use(useVeTable())
.mount('#app');

Example:

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

<script>
  export default {
    data() {
      return {
        columns: [
          { field: "name", key: "a", title: "Name", align: "center" },
          { field: "date", key: "b", title: "Date", align: "left" },
          { field: "hobby", key: "c", title: "Hobby", align: "right" },
          { field: "address", key: "d", title: "Address" },
        ],
        tableData: [
          {
            name: "John",
            date: "1900-05-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shanghai",
          },
          {
            name: "Dickerson",
            date: "1910-06-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Beijing",
          },
          {
            name: "Larsen",
            date: "2000-07-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Chongqing",
          },
          {
            name: "Geneva",
            date: "2010-08-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Xiamen",
          },
          {
            name: "Jami",
            date: "2020-09-20",
            hobby: "coding and coding repeat",
            address: "No.1 Century Avenue, Shenzhen",
          },
        ],
      };
    },
  };
</script>