add doc

website/docs/base.md

@@ -0,0 +1,78 @@
+# 基础用法
+
+最简单用法只需要准备 `columns` 和 `loadMethod` 即可完成使用。
+
+对于数据来源，只需要实现 `loadMethod` 并返回相应数据结构即可，该函数可以返回一个`Promise`作为异步处理。
+
+:::demo 从用法不难看出，我们将传统的 `template` 编写套路改为`script options`的形式，让我们专注与逻辑部分，忽略xml结构的臃肿。
+
+```html
+<template>
+  <TableData :load-method="loadMethod" :columns="columns" />
+</template>
+
+<script>
+  export default {
+    setup() {
+      const columns = [
+        {
+          label: '标题',
+          prop: 'title',
+          showOverflowTooltip: true,
+        },
+        {
+          label: '描述',
+          prop: 'brief',
+          showOverflowTooltip: true,
+        },
+        {
+          label: '时间',
+          prop: 'date',
+        },
+      ]
+      const loadMethod = ({ page }) => {
+        return new Promise((resolve, reject) => {
+          // todo 这里可以换成接口数据
+          resolve({
+            total: 5,
+            list: [
+              {
+                title: '标题1',
+                brief: '描述1',
+                date: '2021-01-01',
+              },
+              {
+                title: '标题2',
+                brief: '描述2',
+                date: '2021-01-02',
+              },
+              {
+                title: '标题3',
+                brief: '描述3',
+                date: '2021-01-03',
+              },
+              {
+                title: '标题4',
+                brief: '描述4',
+                date: '2021-01-04',
+              },
+              {
+                title: '标题5',
+                brief: '描述5',
+                date: '2021-01-05',
+              },
+            ],
+          })
+        })
+      }
+
+      return {
+        columns,
+        loadMethod,
+      }
+    },
+  }
+</script>
+```
+
+:::

website/docs/formatter.md

@@ -0,0 +1,82 @@
+# 格式化 列
+
+格式化 column 只需要对在 `column` 中实现了 `formatter` 方法的进行格式化即可。
+
+复杂数据或需要 html 渲染可将 formatter 返回 jsx 语法，但需要工程化中配置 `jsx` 支持。
+
+:::demo
+
+```html
+<template>
+  <TableData :load-method="loadMethod" :columns="columns" />
+</template>
+
+<script>
+  export default {
+    setup() {
+      const columns = [
+        {
+          label: '标题',
+          prop: 'title',
+          showOverflowTooltip: true,
+        },
+        {
+          label: '描述',
+          prop: 'brief',
+          showOverflowTooltip: true,
+        },
+        {
+          label: '时间',
+          prop: 'date',
+          // this is a formatter
+          formatter(row, column, cellValue){
+            return <span>我是格式化后的数据{row.date}</span>
+          },
+        },
+      ]
+      const loadMethod = ({ page }) => {
+        return new Promise((resolve, reject) => {
+          // todo 这里可以换成接口数据
+          resolve({
+            total: 5,
+            list: [
+              {
+                title: '标题1',
+                brief: '描述1',
+                date: '2021-01-01',
+              },
+              {
+                title: '标题2',
+                brief: '描述2',
+                date: '2021-01-02',
+              },
+              {
+                title: '标题3',
+                brief: '描述3',
+                date: '2021-01-03',
+              },
+              {
+                title: '标题4',
+                brief: '描述4',
+                date: '2021-01-04',
+              },
+              {
+                title: '标题5',
+                brief: '描述5',
+                date: '2021-01-05',
+              },
+            ],
+          })
+        })
+      }
+
+      return {
+        columns,
+        loadMethod,
+      }
+    },
+  }
+</script>
+```
+
+:::

website/nav.config.json

@@ -20,8 +20,12 @@
     "name": "例子",
     "children": [
       {
-        "path": "/test",
-        "name": "安装"
+        "path": "/base",
+        "name": "基础用法"
+      },
+      {
+        "path": "/formatter",
+        "name": "列格式化"
       }
     ]
   }

website/pages/index.vue

@@ -19,6 +19,11 @@
       </div>
     </div>
 
+    <div class="home-info-item">
+      <h2 class="info-title">框架与思考</h2>
+      <p>作为长期在一线做业务开发，日常最怕的就是页面切换和重复的编码，又由于 Vue 的特性导致开发过程中频繁在template和script中切换，所以本组件本着降低切换成本，将template+options优化为options。</p>
+    </div>
+
     <div style="margin-bottom: 20px">
       <el-button
         type="primary"
@@ -296,5 +301,19 @@ export default defineComponent({
       }
     }
   }
+  .home-info-item{
+    /* background-color: rgb(247, 252, 254); */
+    background-image: linear-gradient(-45deg, #fbfcf7 0%,  #eff9ff 100%);
+    padding: 20px 48px;
+    border-radius: 4px;
+    margin-bottom: 36px;
+    h2{
+      color: #0d1a26;
+    }
+    p{
+      color: #697b8c;
+      line-height: 2;
+    }
+  }
 }
 </style>