vue-easytable

English | 中文

Sponsors

通过成为赞助商来支持这个项目。您的商标或名称将与您提供的链接一起显示在此处。成为赞助商

Gold Sponsor

Silver Sponsor

Generous Sponsor

介绍

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

特点

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

API & 文档

• 官方文档 (Github)
• 官方文档 (国内)

功能支持

基础组件

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

Table 组件

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

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

安装

npm install vue-easytable

or

yarn add vue-easytable

使用

Write the following in 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),
});

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 |

Firefox |

Chrome |

Safari |

Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

如何贡献

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

贡献者们

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

Discussion 讨论组

• 加入 gitter 讨论
• 加入 discord 讨论

License

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