Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Happy-Coding-Clans/vue-easytable

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.
https://github.com/Happy-Coding-Clans/vue-easytable

clipboard component contextmenu excel google-sheets grid loading-spinner sheet table unit-test virtual-scroll vue vue-easytable vue-jest vue-table vuejs vuejs2

Last synced: about 6 hours ago
JSON representation

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.

Host: GitHub
URL: https://github.com/Happy-Coding-Clans/vue-easytable
Owner: Happy-Coding-Clans
License: mit
Created: 2016-12-02T03:21:11.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-06-26T06:39:36.000Z (5 months ago)
Last Synced: 2024-10-29T14:52:16.499Z (12 days ago)
Topics: clipboard, component, contextmenu, excel, google-sheets, grid, loading-spinner, sheet, table, unit-test, virtual-scroll, vue, vue-easytable, vue-jest, vue-table, vuejs, vuejs2
Language: JavaScript
Homepage: https://happy-coding-clans.github.io/vue-easytable/
Size: 129 MB
Stars: 3,694
Watchers: 86
Forks: 742
Open Issues: 89
Metadata Files:
- Readme: README-CN.md
- Changelog: CHANGE-LOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        [![npm](https://img.shields.io/npm/v/vue-easytable.svg)](https://www.npmjs.com/package/vue-easytable)

[![vue2](https://img.shields.io/badge/vue-2.6+-brightgreen.svg)](https://vuejs.org/)

[![NPM downloads](https://img.shields.io/npm/dm/vue-easytable.svg?style=flat)](https://npmjs.org/package/vue-easytable)

[![codecov](https://codecov.io/gh/Happy-Coding-Clans/vue-easytable/branch/master/graph/badge.svg?token=UJy3LHInUn)](https://codecov.io/gh/Happy-Coding-Clans/vue-easytable)

[![license](https://img.shields.io/npm/l/vue-easytable.svg?maxAge=2592000)](http://www.opensource.org/licenses/mit-license.php)

[![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/gBm3k6r)

[![Gitter](https://badges.gitter.im/vue-easytable/community.svg)](https://gitter.im/vue-easytable/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

# vue-easytable

[English](./README.md) | **中文**



  

    

  



## Sponsors

通过成为赞助商来支持这个项目。您的商标或名称将与您提供的链接一起显示在此处。[成为赞助商](https://www.patreon.com/huangshuwei)

Gold Sponsor

Silver Sponsor



  

    

  



Generous Sponsor


## 介绍

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

## 特点

-   采用虚拟滚动技术，支持 30 万行数据展示

-   永久免费。当然你也可以选择捐赠

## API & 文档

-   [官方文档 (Github)](http://happy-coding-clans.github.io/vue-easytable/)

-   [官方文档 (国内)](http://huangshuwei.gitee.io/vue-easytable/)

## 功能支持

**基础组件**

-   [x] [Loading 加载组件](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/base/loading)

-   [x] [Pagination 分页组件](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/base/pagination)

-   [x] [Contextmenu 右键菜单组件](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/base/contextmenu)

-   [x] [Icon 图标组件](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/base/icon)

-   [x] [Locale 国际化组件](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/base/locale)

**Table 组件**

-   [x] [国际化](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/locale)

-   [x] [主题定制 & 内置主题](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/theme)

-   [x] [虚拟滚动](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/virtual-scroll)

-   [x] [列固定](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/column-fixed)

-   [x] [列隐藏](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/column-hidden)

-   [x] [表头固定](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/header-fixed)

-   [x] [表头分组](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/header-grouping)

-   [x] [筛选](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/header-filter)

-   [x] [排序](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/header-sort)

-   [x] [列宽拖动](https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/column-resize)

-   [x] [单元格样式](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-style)

-   [x] [单元格自定义](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-custom)

-   [x] [单元格合并](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-span)

-   [x] [单元格选择（键盘操作）](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-selection)

-   [x] [单元格自动填充](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-autofill)

-   [x] [单元格编辑](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-edit)

-   [x] [剪贴板](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/clipboard)

-   [x] [右键菜单](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/contextmenu)

-   [x] [单元格省略](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-ellipsis)

-   [x] [行单选](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-radio)

-   [x] [行多选](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-checkbox)

-   [x] [行展开](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-expand)

-   [x] [行样式](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-style)

-   [x] [footer 汇总](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/footer-summary)

-   [x] [自定义事件](http://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/event-custom)

-   [更多](http://happy-coding-clans.github.io/vue-easytable)

如果没有你想要的的功能

，[请告诉我们](http://happy-coding-clans.github.io/issue-template-generater/#/zh)

## 安装

```

npm install vue-easytable

```

or

```

yarn add vue-easytable

```

## 使用

Write the following in main.js:

```javascript

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),

});

```

Example:

```javascript

  

  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",

          },

        ],

      };

    },

  };

```

## 开发计划

[正在做的事情](https://github.com/Happy-Coding-Clans/vue-easytable/projects)

## 支持环境

-   现代浏览器和 IE11 及以上

| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)Opera |

| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| IE11, Edge                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           |

## 如何贡献

如果你希望参与贡献，欢迎

[Pull Request](https://github.com/huangshuwei/vue-easytable/pulls)

## 贡献者们

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



  



## Discussion 讨论组

-   [加入 gitter 讨论](https://gitter.im/vue-easytable/community)

-   [加入 discord 讨论](https://discord.gg/gBm3k6r)

## License

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