vue-easytable::watermelon:表组件数据网格数据表。支持虚拟滚动,固定列,固定标题,标题分组,过滤,排序,

  • p3_514658
    了解作者
  • 1MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 17:24
    上传日期
容易看清 English | 赞助商 金牌赞助商 银牌赞助商 慷慨的赞助商 介绍 基于vue2.x的灵活表组件。 v2.0新版本 完成版本1.0的重写。 基于JSX语法重写,参数命名规范化,事件命名规范化等 国际支持 支持自定义主题和内置两个主题 支持虚拟滚动 支持行展开 支持自定义单元格内容。 基于render功能 支持自定义事件 支持单元省略号 支持加载组件 添加单元测试> 85%的覆盖率 正式文件更新 有关更多信息,请参阅 特征 易于使用 强大的 单元测试覆盖率大于85% API与范例 技术支持 如果没有您想要的功能, 安装 npm install vue-easytable 或者 yarn add vue-easytable 用法 在mian.js中编写以下内容: import Vue from "vue"; import "vue-easytable/libs/them
vue-easytable-master.zip
内容介绍
[![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) [![Build Status](https://travis-ci.com/Happy-Coding-Clans/vue-easytable.svg?branch=master)](https://travis-ci.com/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) [![chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/gBm3k6r) # vue-easytable **English** | [中文](./README-CN.md) <p> <a href="https://www.patreon.com/huangshuwei" target="_blank" rel='nofollow' onclick='return false;'> <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon"> </a> </p> ## Sponsors <h3 align="center">Gold Sponsor</h3> <h3 align="center">Silver Sponsor</h3> <h3 align="center">Generous Sponsor</h3> ## Introduction Based on vue2.x flexible table components. ## v2.0 New Version [![npm](https://img.shields.io/npm/v/vue-easytable.svg)](https://www.npmjs.com/package/vue-easytable) - Complete rewriting of version 1.0. Based on JSX syntax rewriting、Parameter naming normalization、Event naming normalization, etc - Support International - Support Custom theme & Built in two themes - Support Virtual scrolling - Support Row expand - Support Custom cell content. Based on `render` function - Support Custom event - Support Cell ellipsis - Support Loading component - Add Unit test > 85% coverage - Official document update - For more information, Refer to [official document ](http://doc.huangsw.com/vue-easytable/#/en/doc/intro) ## Features - Easy to use - Powerful - Unit test coverage greater than 85% ## API & Examples [Official documents](http://doc.huangsw.com/vue-easytable/) ## Supports - [x] [Internationalization](http://doc.huangsw.com/vue-easytable/#/en/doc/locale) - [x] [Theme Custom & Built in theme](http://doc.huangsw.com/vue-easytable/#/en/doc/theme) - [x] [Virtual Scroll](http://doc.huangsw.com/vue-easytable/#/en/doc/table/virtual-scroll) - [x] [Column Fixed](http://doc.huangsw.com/vue-easytable/#/en/doc/table/column-fixed) - [x] [Header Fixed](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-fixed) - [x] [Header Grouping](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-grouping) - [x] [Filter](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-filter) - [x] [Sort](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-sort) - [x] [Cell Style](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-style) - [x] [Cell Custom](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-custom) - [x] [Cell Span](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-span) - [x] [Cell Selection(keyboard operation)](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-selection) - [x] [Cell Ellipsis](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-ellipsis) - [x] [Row Radio](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-radio) - [x] [Row Checkbox](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-checkbox) - [x] [Row Expand](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-expand) - [x] [Row Style](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-style) - [x] [Footer Summary](http://doc.huangsw.com/vue-easytable/#/en/doc/table/footer-summary) - [x] [Event Custom](http://doc.huangsw.com/vue-easytable/#/en/doc/table/event-custom) - [x] [Loading component](http://doc.huangsw.com/vue-easytable/#/en/doc/base/loading) - [x] [Pagination component](http://doc.huangsw.com/vue-easytable/#/en/doc/base/pagination) - [More](http://doc.huangsw.com/vue-easytable) If there is no feature you want, [Please Tell Us](http://doc.huangsw.com/issue-template-generater/#/en) ## Install ``` npm install vue-easytable ``` or ``` yarn add vue-easytable ``` ## Usage Write the following in mian.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> ``` ## Todo List [What are we doing](https://github.com/Happy-Coding-Clans/vue-easytable/projects) ## Environment Support - Modern browser and ie10 and above | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------
评论
    相关推荐
    • jest-with-typescript:在Typescript项目中使用Jest进行单元测试的教程
      开玩笑与打字稿 在Typescript项目中使用Jest进行单元测试的教程 快速开始 本指南向您展示如何运行单元测试。 有关设置的完整教程,请进入 安装 $ yarn install 建立和测试 $ yarn build && yarn test
    • 陷阱收集网
      陷阱收集网 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 ...运行单元测试 yarn run test:unit 自定义配置 请参阅。
    • userly:用户技术测试
      方便地 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 请参阅。
    • test-my-pronunciation:使用Vue 3内置的应用程序可测试您的英语发音
      测试我的发音 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 ...运行单元测试 yarn test:unit 运行端到端测试 yarn test:e2e 整理和修复文件 yarn lint 自定义配置 请参阅。
    • vuestic-ui:Vuestic UI框架
      Vuestic用户界面 项目设置 yarn 编译和热重装以进行开发 ...运行单元测试 yarn test:unit 自定义配置 请参阅。 发展 发电机 yarn generate:component 允许您为应用程序的公共部分自动生成样板代码。
    • 验证测试
      验证测试 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 请参阅。
    • 验证测试
      验证测试 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 ...运行单元测试 yarn test:unit 运行端到端测试 yarn test:e2e 整理和修复文件 yarn lint 自定义配置 请参阅。
    • WineyDex:葡萄酒库存跟踪器
      wineyDex 创建词法和将酒添加到其收藏夹的参考 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build ...运行单元测试 yarn run test:unit 自定义配置 请参阅。
    • Testing:单元测试JavaScript
      单元测试 项目介绍 欢迎来到自动测试(尤其是单元测试)的美好世界。 不管您是否立即知道这一点,您都已经熟悉了此过程,只是,已经为您预先编写了测试。 现在我们从围栏的另一端开始,那里没有测试,只有工作代码...
    • jest-how-do-i-mock-x:常见测试情况下的可运行示例,通常证明具有挑战性
      单元测试有很多方法,我并不是在暗示什么是“好”或“坏”。 本节仅提供有关为何此处的解决方案看起来或不看起来特质的上下文。 单元测试设置 在大多数情况下,测试文件通常是: 在顶层导入一次 对导入的东西进行...