Skip to content

Commit e16d868

Browse files
author
huangshuwei
committed
add install and usage desc
1 parent 8d00a33 commit e16d868

File tree

2 files changed

+191
-23
lines changed

2 files changed

+191
-23
lines changed

‎README-CN.md‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
## API & 文档
3737

38-
[官方文档](http://doc.huangsw.com/vue-easytable)
38+
[官方文档](http://doc.huangsw.com/vue-easytable/)
3939

4040
## 功能支持
4141

@@ -64,6 +64,90 @@
6464

6565
如果没有你想要的的功能，[请告诉我们](http://doc.huangsw.com/issue-template-generater/#/zh)
6666

67+
## 安装
68+
69+
```
70+
npm install vue-easytable
71+
```
72+
73+
or
74+
75+
```
76+
yarn add vue-easytable
77+
```
78+
79+
## 使用
80+
81+
Write the following in mian.js：
82+
83+
```
84+
import Vue from "vue";
85+
import "vue-easytable/libs/theme-default/index.css";
86+
import VueEasytable from "vue-easytable";
87+
88+
Vue.use(VueEasytable);
89+
90+
new Vue({
91+
el: "#app",
92+
render: (h) => h(App),
93+
});
94+
```
95+
96+
Example:
97+
98+
```
99+
<template>
100+
<ve-table :columns="columns" :table-data="tableData" />
101+
</template>
102+
103+
<script>
104+
export default {
105+
data() {
106+
return {
107+
columns: [
108+
{ field: "name", key: "a", title: "Name", align: "center" },
109+
{ field: "date", key: "b", title: "Date", align: "left" },
110+
{ field: "hobby", key: "c", title: "Hobby", align: "right" },
111+
{ field: "address", key: "d", title: "Address" },
112+
],
113+
tableData: [
114+
{
115+
name: "John",
116+
date: "1900-05-20",
117+
hobby: "coding and coding repeat",
118+
address: "No.1 Century Avenue, Shanghai",
119+
},
120+
{
121+
name: "Dickerson",
122+
date: "1910-06-20",
123+
hobby: "coding and coding repeat",
124+
address: "No.1 Century Avenue, Beijing",
125+
},
126+
{
127+
name: "Larsen",
128+
date: "2000-07-20",
129+
hobby: "coding and coding repeat",
130+
address: "No.1 Century Avenue, Chongqing",
131+
},
132+
{
133+
name: "Geneva",
134+
date: "2010-08-20",
135+
hobby: "coding and coding repeat",
136+
address: "No.1 Century Avenue, Xiamen",
137+
},
138+
{
139+
name: "Jami",
140+
date: "2020-09-20",
141+
hobby: "coding and coding repeat",
142+
address: "No.1 Century Avenue, Shenzhen",
143+
},
144+
],
145+
};
146+
},
147+
};
148+
</script>
149+
```
150+
67151
## 开发计划
68152

69153
[正在做的事情](https://github.com/Happy-Coding-Clans/vue-easytable/projects)

‎README.md‎

Lines changed: 106 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -35,35 +35,119 @@ Based on vue2.x flexible table components.
3535

3636
## API & Examples
3737

38-
[Official documents](http://doc.huangsw.com/vue-easytable)
38+
[Official documents](http://doc.huangsw.com/vue-easytable/)
3939

4040
## Supports
4141

42-
- [x] [Internationalization](http://doc.huangsw.com/vue-easytable/#/zh/doc/locale)
43-
- [x] [Theme Custom & Built in theme](http://doc.huangsw.com/vue-easytable/#/zh/doc/theme)
44-
- [x] [Virtual Scroll](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/virtual-scroll)
45-
- [x] [Column Fixed](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/column-fixed)
46-
- [x] [Header Fixed](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/header-fixed)
47-
- [x] [Header Grouping](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/header-grouping)
48-
- [x] [Filter](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/header-filter)
49-
- [x] [Sort](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/header-sort)
50-
- [x] [Cell Style](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/cell-style)
51-
- [x] [Cell Custom](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/cell-custom)
52-
- [x] [Cell Span](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/cell-span)
53-
- [x] [Cell Selection(keyboard operation)](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/cell-selection)
54-
- [x] [Cell Ellipsis](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/cell-ellipsis)
55-
- [x] [Row Radio](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/row-radio)
56-
- [x] [Row Checkbox](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/row-checkbox)
57-
- [x] [Row Expand](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/row-expand)
58-
- [x] [Row Style](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/row-style)
59-
- [x] [Footer Summary](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/footer-summary)
60-
- [x] [Event Custom](http://doc.huangsw.com/vue-easytable/#/zh/doc/table/event-custom)
61-
- [x] [Loading component](http://doc.huangsw.com/vue-easytable/#/zh/doc/base/loading)
62-
- [x] [Pagination component](http://doc.huangsw.com/vue-easytable/#/zh/doc/base/pagination)
42+
- [x] [Internationalization](http://doc.huangsw.com/vue-easytable/#/en/doc/locale)
43+
- [x] [Theme Custom & Built in theme](http://doc.huangsw.com/vue-easytable/#/en/doc/theme)
44+
- [x] [Virtual Scroll](http://doc.huangsw.com/vue-easytable/#/en/doc/table/virtual-scroll)
45+
- [x] [Column Fixed](http://doc.huangsw.com/vue-easytable/#/en/doc/table/column-fixed)
46+
- [x] [Header Fixed](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-fixed)
47+
- [x] [Header Grouping](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-grouping)
48+
- [x] [Filter](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-filter)
49+
- [x] [Sort](http://doc.huangsw.com/vue-easytable/#/en/doc/table/header-sort)
50+
- [x] [Cell Style](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-style)
51+
- [x] [Cell Custom](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-custom)
52+
- [x] [Cell Span](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-span)
53+
- [x] [Cell Selection(keyboard operation)](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-selection)
54+
- [x] [Cell Ellipsis](http://doc.huangsw.com/vue-easytable/#/en/doc/table/cell-ellipsis)
55+
- [x] [Row Radio](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-radio)
56+
- [x] [Row Checkbox](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-checkbox)
57+
- [x] [Row Expand](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-expand)
58+
- [x] [Row Style](http://doc.huangsw.com/vue-easytable/#/en/doc/table/row-style)
59+
- [x] [Footer Summary](http://doc.huangsw.com/vue-easytable/#/en/doc/table/footer-summary)
60+
- [x] [Event Custom](http://doc.huangsw.com/vue-easytable/#/en/doc/table/event-custom)
61+
- [x] [Loading component](http://doc.huangsw.com/vue-easytable/#/en/doc/base/loading)
62+
- [x] [Pagination component](http://doc.huangsw.com/vue-easytable/#/en/doc/base/pagination)
6363
- [More](http://doc.huangsw.com/vue-easytable)
6464

6565
If there is no feature you want, [Please Tell Us](http://doc.huangsw.com/issue-template-generater/#/en)
6666

67+
## Install
68+
69+
```
70+
npm install vue-easytable
71+
```
72+
73+
or
74+
75+
```
76+
yarn add vue-easytable
77+
```
78+
79+
## Usage
80+
81+
Write the following in mian.js：
82+
83+
```
84+
import Vue from "vue";
85+
import "vue-easytable/libs/theme-default/index.css";
86+
import VueEasytable from "vue-easytable";
87+
88+
Vue.use(VueEasytable);
89+
90+
new Vue({
91+
el: "#app",
92+
render: (h) => h(App),
93+
});
94+
```
95+
96+
Example:
97+
98+
```
99+
<template>
100+
<ve-table :columns="columns" :table-data="tableData" />
101+
</template>
102+
103+
<script>
104+
export default {
105+
data() {
106+
return {
107+
columns: [
108+
{ field: "name", key: "a", title: "Name", align: "center" },
109+
{ field: "date", key: "b", title: "Date", align: "left" },
110+
{ field: "hobby", key: "c", title: "Hobby", align: "right" },
111+
{ field: "address", key: "d", title: "Address" },
112+
],
113+
tableData: [
114+
{
115+
name: "John",
116+
date: "1900-05-20",
117+
hobby: "coding and coding repeat",
118+
address: "No.1 Century Avenue, Shanghai",
119+
},
120+
{
121+
name: "Dickerson",
122+
date: "1910-06-20",
123+
hobby: "coding and coding repeat",
124+
address: "No.1 Century Avenue, Beijing",
125+
},
126+
{
127+
name: "Larsen",
128+
date: "2000-07-20",
129+
hobby: "coding and coding repeat",
130+
address: "No.1 Century Avenue, Chongqing",
131+
},
132+
{
133+
name: "Geneva",
134+
date: "2010-08-20",
135+
hobby: "coding and coding repeat",
136+
address: "No.1 Century Avenue, Xiamen",
137+
},
138+
{
139+
name: "Jami",
140+
date: "2020-09-20",
141+
hobby: "coding and coding repeat",
142+
address: "No.1 Century Avenue, Shenzhen",
143+
},
144+
],
145+
};
146+
},
147+
};
148+
</script>
149+
```
150+
67151
## Todo List
68152

69153
[What are we doing](https://github.com/Happy-Coding-Clans/vue-easytable/projects)

0 commit comments

Comments
 (0)