Skip to content

Commit ba9fe32

Browse files
author
黄书伟
committed
update doc
1 parent 8470884 commit ba9fe32

File tree

6 files changed

+110
-25
lines changed

6 files changed

+110
-25
lines changed

‎examples/comp/App.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
<li>
2121
<a class="main-wrapper-sidebar-link" href="javascript:javascript:void(0);">开始</a>
2222
<ul class="menu-sub">
23+
<li>
24+
<router-link to="/intro">介绍</router-link>
25+
</li>
26+
<li>
27+
<router-link to="/install">安装</router-link>
28+
</li>
2329
<li>
2430
<router-link to="/start">快速上手</router-link>
2531
</li>

‎examples/css/index.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ body, html {
101101
}
102102

103103
.main-wrapper-sidebar .menu-sub li {
104-
line-height: 3.1em;
104+
line-height: 2.3em;
105105
}
106106

107107

@@ -708,4 +708,8 @@ code {
708708

709709
.anchor{
710710
cursor: pointer;
711+
}
712+
713+
.hljs{
714+
background-color: #fafafa !important;
711715
}

‎examples/doc/install.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
## 安装
3+
4+
### CDN 方式使用
5+
6+
通过 https://unpkg.com/vue-easytable 可以看到 vue-easytable 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：
7+
8+
```css
9+
<!-- 引入样式 -->
10+
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">
11+
<!-- 引入Vue -->
12+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
13+
<!-- 引入组件库 -->
14+
<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
15+
```
16+
17+
### 示例
18+
``` html
19+
<!DOCTYPE html>
20+
<html>
21+
<head>
22+
<meta charset="UTF-8">
23+
<!-- 引入样式 -->
24+
<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">
25+
</head>
26+
<body>
27+
<div id="app">
28+
<v-table
29+
:width="1000"
30+
:columns="columns"
31+
:table-data="tableData"
32+
:show-vertical-border="false"
33+
></v-table>
34+
</div>
35+
</body>
36+
<!-- 先引入 Vue -->
37+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
38+
<!-- 引入组件库 -->
39+
<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
40+
<script>
41+
new Vue({
42+
el: '#app',
43+
data: function() {
44+
return {
45+
tableData: [
46+
{"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
47+
{"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
48+
{"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
49+
{"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
50+
{"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
51+
],
52+
columns: [
53+
{field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center'},
54+
{field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center'},
55+
{field: 'hobby', title: '爱好', width: 330, titleAlign: 'center',columnAlign:'center'},
56+
{field: 'address', title: '地址', titleAlign: 'center',columnAlign:'left'}
57+
]
58+
}
59+
}
60+
})
61+
</script>
62+
</html>
63+
```
64+
65+
### NPM 方式使用
66+
67+
```javascript
68+
npm install vue-easytable --save-dev
69+
```
70+
71+
### 使用
72+
73+
```javascript
74+
// 引入样式
75+
import 'vue-easytable/libs/themes-base/index.css'
76+
// 导入 table 和 分页组件
77+
import {VTable,VPagination} from 'vue-easytable'
78+
79+
// 注册到全局
80+
Vue.component(VTable.name, VTable)
81+
Vue.component(VPagination.name, VPagination)
82+
```

‎examples/doc/intro.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
## 介绍
3+
基于 vue2.x 的 table 组件支持单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、多选等功能
4+
5+
6+
### 效果展示（只是部分功能）
7+
![vue-easytable](../images/vue-easytable.gif)
8+
9+

‎examples/doc/strart.md

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,8 @@
1+
## 快速上手
12

2-
### 介绍
3-
基于 vue2.x 的 table 组件支持单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、多选等功能
43

54

6-
### 安装
7-
8-
```javascript
9-
npm install vue-easytable --save-dev
10-
```
11-
12-
### 使用
13-
14-
15-
```javascript
16-
import 'vue-easytable/libs/themes-base/index.css'
17-
import {VTable,VPagination} from 'vue-easytable'
18-
19-
Vue.component(VTable.name, VTable)
20-
Vue.component(VPagination.name, VPagination)
21-
```
22-
23-
### 全局配置表格字体以及其他样式
5+
### 全局配置表格字体等样式
246

257
表格内的字体以及字体大小默认是依赖于全局设置的字体，如果需要设置可以通过开放的class 即可：
268

@@ -61,8 +43,6 @@ Vue.component(VPagination.name, VPagination)
6143
}
6244
```
6345

64-
### 效果展示（只是部分功能）
65-
![vue-easytable](../images/vue-easytable.gif)
6646

6747

6848

‎examples/router.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Vue from "vue";
22
import VueRouter from "vue-router";
33

4+
const intro = r => require.ensure([], () => r(require('./doc/intro.md')), 'intro');
5+
const install = r => require.ensure([], () => r(require('./doc/install.md')), 'install');
46
const start = r => require.ensure([], () => r(require('./doc/strart.md')), 'start');
57
const pagination = r => require.ensure([], () => r(require('./doc/pagination/Pagination.md')), 'pagination');
68
const table = r => require.ensure([], () => r(require('./doc/table/main.md')), 'table');
@@ -13,15 +15,17 @@ Vue.use(VueRouter)
1315
export default new VueRouter({
1416
linkActiveClass: 'active',
1517
routes: [
16-
{ path: '/', redirect: '/start' }, // 默认路由
18+
{ path: '/', redirect: '/intro' }, // 默认路由
19+
{ path: '/intro', component: intro },
20+
{ path: '/install', component: install },
1721
{ path: '/start', component: start },
1822
{ path: '/pagination', component: pagination },
1923
{ path: '/table', component: table },
2024
{ path: '/checkbox', component: checkbox },
2125

2226
{
2327
path: '*',
24-
redirect: '/start'
28+
redirect: '/intro'
2529
}
2630
/* {
2731
path: '*', component: {

0 commit comments

Comments
 (0)