@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 & 文档

• 官方文档
• 官方文档 (GitHub Pages)

功能支持

基础组件

• Loading 加载组件
• Pagination 分页组件
• Contextmenu 右键菜单组件
• Icon 图标组件
• Locale 国际化组件

Table 组件

• 国际化
• 主题定制 & 内置主题
• 虚拟滚动
• 列固定
• 列隐藏
• 表头固定
• 表头分组
• 筛选
• 排序
• 列宽拖动
• 单元格样式
• 单元格自定义
• 单元格合并
• 单元格选择（键盘操作）
• 单元格自动填充
• 单元格编辑
• 剪贴板
• 右键菜单
• 单元格省略
• 行单选
• 行多选
• 行展开
• 行样式
• footer 汇总
• 自定义事件
• 更多

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

安装

1pnpm install @easytable/vue

or

1yarn add @easytable/vue

使用

Write the following in main.js:

1import { createApp } from 'vue';
2import '@easytable/vue/libs/theme-default/index.css';
3import { useVeTable } from '@easytable/vue';
4
5createApp({
6  render: (h) => h(App),
7})
8.use(useVeTable())
9.mount('#app');

Example:

1<template>
2  <ve-table :columns="columns" :table-data="tableData" />
3</template>
4
5<script>
6  export default {
7    data() {
8      return {
9        columns: [
10          { field: "name", key: "a", title: "Name", align: "center" },
11          { field: "date", key: "b", title: "Date", align: "left" },
12          { field: "hobby", key: "c", title: "Hobby", align: "right" },
13          { field: "address", key: "d", title: "Address" },
14        ],
15        tableData: [
16          {
17            name: "John",
18            date: "1900-05-20",
19            hobby: "coding and coding repeat",
20            address: "No.1 Century Avenue, Shanghai",
21          },
22          {
23            name: "Dickerson",
24            date: "1910-06-20",
25            hobby: "coding and coding repeat",
26            address: "No.1 Century Avenue, Beijing",
27          },
28          {
29            name: "Larsen",
30            date: "2000-07-20",
31            hobby: "coding and coding repeat",
32            address: "No.1 Century Avenue, Chongqing",
33          },
34          {
35            name: "Geneva",
36            date: "2010-08-20",
37            hobby: "coding and coding repeat",
38            address: "No.1 Century Avenue, Xiamen",
39          },
40          {
41            name: "Jami",
42            date: "2020-09-20",
43            hobby: "coding and coding repeat",
44            address: "No.1 Century Avenue, Shenzhen",
45          },
46        ],
47      };
48    },
49  };
50</script>

开发计划

正在做的事情

支持环境

• 现代浏览器和 IE11 及以上

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

如何贡献

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

Star History

贡献者们

感谢原组件库作者 huangshuwei

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

License

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