diff --git a/docs/app.vue b/docs/app.vue
index 93e8737..90fd2bf 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -5,11 +5,11 @@
V2 Table: A simple table component based Vue 2.x
Quick Start
Install
- npm i --save v2-table
+ npm i --save v2-table beautify-scrollbar
OR
- yarn add v2-table
+ yarn add v2-table beautify-scrollbar
Global Register
- import Vue from 'vue';
import 'v2-table/dist/index.css';
import V2Table from 'v2-table';
Vue.use(V2Table);
+ import Vue from 'vue';
import 'beautify-scrollbar/dist/index.css';
import 'v2-table/dist/index.css';
import V2Table from 'v2-table';
Vue.use(V2Table);
diff --git a/docs/example.md b/docs/example.md
index 3f412d7..3d8ac8b 100644
--- a/docs/example.md
+++ b/docs/example.md
@@ -2,6 +2,7 @@
export default {
data () {
return {
+ list5: [],
loading: false,
currentPage: 1,
total: 198,
@@ -303,6 +304,32 @@
handleSelectChange (rows) {
console.log(rows);
}
+ },
+
+ mounted () {
+ const item = {
+ date: '2017-12-02',
+ name: '',
+ address: 'Shenzhen,China',
+ birthDay: '1988-09-08',
+ songs: 0,
+ province: 'Guangdong',
+ city: 'Shenzhen',
+ country: 'China',
+ age: 30,
+ salary: 12000,
+ desc: 'no desc'
+ };
+ const list5 = [];
+
+ for(let i = 0; i < 50; i++) {
+ list5.push(Object.assign({}, item, {
+ name: `test${i+1}`,
+ songs: i+1
+ }));
+ }
+
+ this.list5 = [].concat(list5);
}
}
@@ -331,7 +358,7 @@
```html
-
+
@@ -352,7 +379,7 @@
Basic table is just for data display./基础的表格展示用法。
-:::demo After setting attribute `data` of `v2-table` with an object array, you can use `prop` in `v2-table-column` to insert data to table columns, and set the attribute `label` to define the column name. / 当 `v2-table`元素中注入 `data` 对象数组后,在 `v2-table-column` 中用 `prop` 属性来对应对象中的键名即可填入数据,用 `label` 属性来定义表格的列名。\n sdas
+:::demo After setting attribute `data` of `v2-table` with an object array, you can use `prop` in `v2-table-column` to insert data to table columns, and set the attribute `label` to define the column name. / 当 `v2-table`元素中注入 `data` 对象数组后,在 `v2-table-column` 中用 `prop` 属性来对应对象中的键名即可填入数据,用 `label` 属性来定义表格的列名。
```html
@@ -531,6 +558,64 @@ Basic table is just for data display./基础的表格展示用法。
```
:::
+## Lazy-load/懒加载
+:::demo Set attribute `lazy-load` of v2-table to true, and set the height(it should be gt 100) of table. / 设置 Table 组件的 `lazy-load` 属性为 true,并为 Table 设置一个高度(需大于100)。
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
## Striped Table/带斑马纹表格
Using striped table can distinguish different rows./使用斑马纹表格可以区分不同的数据。
@@ -1706,4 +1791,4 @@ Sort the data to find or compare data quickly./对表格进行排序,可快速
}
```
-:::
\ No newline at end of file
+:::