vue

您所在的位置：网站首页 › vue表格数据 › vue

vue

2023-03-09 03:48| 来源: 网络整理| 查看: 265

npm NPM downloads license Gitter

vue-easytable

English | 中文

Sponsors

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

Gold Sponsor Silver Sponsor

Become a Patreon

Generous Sponsor 介绍

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

特点采用虚拟滚动技术，支持 30 万行数据展示永久免费。当然你也可以选择捐赠 API & 文档官方文档 (Github) 官方文档 (国内) 功能支持

基础组件

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

Table 组件

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

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

安装 npm install vue-easytable

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:

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", }, ], }; }, }; 开发计划

正在做的事情

支持环境现代浏览器和 IE11 及以上