Skip to content
master
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jan 28, 2021
Feb 20, 2021
Jan 24, 2021
Jan 24, 2021
Jan 28, 2021
Aug 31, 2017
Jan 28, 2021
Feb 20, 2021

README.md

npm vue2 NPM downloads codecov Build Status license chat

vue-easytable

English | 中文

Introduction

Based on vue2.x flexible table components.

v2.0 New Version npm

  • 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

Features

  • Easy to use
  • Powerful
  • Unit test coverage greater than 85%

API & Examples

Official documents

Supports

If there is no feature you want, Please Tell Us

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

Environment Support

  • Modern browser and ie10 and above
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

How to contribute

If you want to contribute,just create a Pull Request

Discussion group

Join in Discord Chat Room

License

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