Skip to content

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

Notifications You must be signed in to change notification settings

kohaiy/easytable

Repository files navigation

npm vue3.2 NPM downloads license

@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

or

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>

开发计划

正在做的事情

支持环境

  • 现代浏览器和 IE11 及以上
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

如何贡献

如果你希望参与贡献,欢迎 Pull Request

Star History

Star History Chart

贡献者们

感谢原组件库作者 huangshuwei

同时感谢以下小伙伴们做出的贡献 🙏

License

http://www.opensource.org/licenses/mit-license.php

About

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published