chore: Update doc

87045e97 · Sendya · d7ecca44 · 87045e97 · 87045e97
Commit 87045e97 authored Nov 26, 2018 by Sendya
Hide whitespace changes
Inline Side-by-side

Showing with 272 additions and 267 deletions

README.md README.md +120 -120

README.md src/components/table/README.md +152 -147

No files found.
--- a/README.md
+++ b/README.md
 Ant Design Pro Vue
 ====
 Overview
 ----
 基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/)  Vue 版
 [预览地址](https://pro.loacg.com/)  **附带一些后台基础用到的列表展示例子**
-![工作台+设置菜单](https://static-2.loacg.com/open/static/github/2018-11-10_19-23-39.png)
+![工作台+设置菜单](https://static-2.loacg.com/open/static/github/20181126112124.png)
 ![工作台](https://static-2.loacg.com/open/static/github/20180916-134306.png)
 ![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
 ![个人中心](https://static-2.loacg.com/open/static/github/20181020152930.png)
 ![内联编辑列表](https://static-2.loacg.com/open/static/github/20180916-155011.png)
 ![角色列表](https://static-2.loacg.com/open/static/github/20180916-154921.png)
 ![角色编辑](https://static-2.loacg.com/open/static/github/20180916-155317.png)
 ![权限列表](https://static-2.loacg.com/open/static/github/20180916-154937.png)
 ![权限编辑](https://static-2.loacg.com/open/static/github/20180916-154950.png)
 权限路由控制流程
 ![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
 环境和依赖
 ----
 - node
 - yarn
 - webpack
 - eslint
 - @vue/cli 3.0.1
 - [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
 - [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
 - [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
 - [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - antv/g2 封装实现
 项目下载和运行
 ----
 - 拉取项目代码
 ```bash
 git clone https://github.com/sendya/ant-design-pro-vue.git
 cd ant-design-pro-vue
 ```
 - 安装依赖
 ```
 yarn install
 ```
 - 开发模式运行
 ```
 yarn run serve
 ```
 - 编译项目
 ```
 yarn run build
 ```
 - Lints and fixes files
 ```
 yarn run lint
 ```
 其他说明
 ----
 - 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
 - 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码
 - 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/)  项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)
 - 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
 ```ecmascript 6
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  }
 ```
 附属文档
 ----
 - [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
 - [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
 - [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultConfig.js)
 - 其他待补充...
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -16,63 +16,67 @@ Table 重封装组件说明
 （基础使用）
 ```vue
 <template>
-    <s-table
+  <s-table
-      ref="table"
+    ref="table"
-      size="default"
+    :rowKey="(record) => record.data.id"
-      :columns="columns"
+    size="default"
-      :data="loadData"
+    :columns="columns"
-    >
+    :data="loadData"
-    </s-table>
+  >
+  </s-table>
 </template>
 <script>
-  	import STable from '@/components/table/'
+  import STable from '@/components/table/'
-    export default {
-    	components: {
+  export default {
-    		STable
+    components: {
-    	},
+      STable
-        data () {
+    },
-            return {
+    data() {
-                columns: [
+      return {
-                  {
+        columns: [
-                    title: '规则编号',
+          {
-                    dataIndex: 'no'
+            title: '规则编号',
-                  },
+            dataIndex: 'no'
-                  {
+          },
-                    title: '描述',
+          {
-                    dataIndex: 'description'
+            title: '描述',
-                  },
+            dataIndex: 'description'
-                  {
+          },
-                    title: '服务调用次数',
+          {
-                    dataIndex: 'callNo',
+            title: '服务调用次数',
-                    sorter: true,
+            dataIndex: 'callNo',
-                    needTotal: true,
+            sorter: true,
-                    customRender: (text) => text + ' 次'
+            needTotal: true,
-                  },
+            customRender: (text) => text + ' 次'
-                  {
+          },
-                    title: '状态',
+          {
-                    dataIndex: 'status',
+            title: '状态',
-                    needTotal: true
+            dataIndex: 'status',
-                  },
+            needTotal: true
-                  {
+          },
-                    title: '更新时间',
+          {
-                    dataIndex: 'updatedAt',
+            title: '更新时间',
-                    sorter: true
+            dataIndex: 'updatedAt',
-                  }
+            sorter: true
-                ],
+          }
-                // 查询条件参数
+        ],
-                queryParam: {},
+        // 查询条件参数
-                // 加载数据方法 必须为 Promise 对象
+        queryParam: {},
-                loadData: parameter => {
+        // 加载数据方法 必须为 Promise 对象
-                  return this.$http.get('/service', {
+        loadData: parameter => {
-                    params: Object.assign(parameter, this.queryParam)
+          return this.$http.get('/service', {
-                  }).then(res => {
+            params: Object.assign(parameter, this.queryParam)
-                    return res.result
+          }).then(res => {
-                  })
+            return res.result
-                },
+          })
-            },
+        },
+      }
    }
+  }
 </script>
 ```
@@ -86,94 +90,95 @@ Table 重封装组件说明
 ```vue
 <template>
-    <s-table
+  <s-table
-      ref="table"
+    ref="table"
-      size="default"
+    size="default"
-      :columns="columns"
+    :columns="columns"
-      :data="loadData"
+    :data="loadData"
-    >
+  >
-        <span slot="action" slot-scope="text, record">
+    <span slot="action" slot-scope="text, record">
-          <a>编辑</a>
+      <a>编辑</a>
-          <a-divider type="vertical" />
+      <a-divider type="vertical"/>
-          <a-dropdown>
+      <a-dropdown>
-            <a class="ant-dropdown-link">
+        <a class="ant-dropdown-link">
-              更多 <a-icon type="down" />
+          更多 <a-icon type="down"/>
-            </a>
+        </a>
-            <a-menu slot="overlay">
+        <a-menu slot="overlay">
-              <a-menu-item>
+          <a-menu-item>
-                <a href="javascript:;">1st menu item</a>
+            <a href="javascript:;">1st menu item</a>
-              </a-menu-item>
+          </a-menu-item>
-              <a-menu-item>
+          <a-menu-item>
-                <a href="javascript:;">2nd menu item</a>
+            <a href="javascript:;">2nd menu item</a>
-              </a-menu-item>
+          </a-menu-item>
-              <a-menu-item>
+          <a-menu-item>
-                <a href="javascript:;">3rd menu item</a>
+            <a href="javascript:;">3rd menu item</a>
-              </a-menu-item>
+          </a-menu-item>
-            </a-menu>
+        </a-menu>
-          </a-dropdown>
+      </a-dropdown>
-        </span>
+    </span>
-    </s-table>
+  </s-table>
 </template>
 <script>
-  	import STable from '@/components/table/'
+  import STable from '@/components/table/'
-    export default {
-    	components: {
+  export default {
-    		STable
+    components: {
-    	},
+      STable
-        data () {
+    },
-            return {
+    data() {
-                columns: [
+      return {
-                    {
+        columns: [
-                        title: '规则编号',
+          {
-                        dataIndex: 'no'
+            title: '规则编号',
-                    },
+            dataIndex: 'no'
-                    {
+          },
-                        title: '描述',
+          {
-                        dataIndex: 'description'
+            title: '描述',
-                    },
+            dataIndex: 'description'
-                    {
+          },
-                        title: '服务调用次数',
+          {
-                        dataIndex: 'callNo',
+            title: '服务调用次数',
-                    },
+            dataIndex: 'callNo',
-                    {
+          },
-                        title: '状态',
+          {
-                        dataIndex: 'status',
+            title: '状态',
-                    },
+            dataIndex: 'status',
-                    {
+          },
-                        title: '更新时间',
+          {
-                        dataIndex: 'updatedAt',
+            title: '更新时间',
-                    },
+            dataIndex: 'updatedAt',
-                    {
+          },
-						table: '操作',
+          {
-                        dataIndex: 'action',
+            table: '操作',
-                        scopedSlots: { customRender: 'action' },
+            dataIndex: 'action',
-                    }
+            scopedSlots: {customRender: 'action'},
-                ],
+          }
-                // 查询条件参数
+        ],
-                queryParam: {},
+        // 查询条件参数
-                // 加载数据方法 必须为 Promise 对象
+        queryParam: {},
-                loadData: parameter => {
+        // 加载数据方法 必须为 Promise 对象
-                  return this.$http.get('/service', {
+        loadData: parameter => {
-                    params: Object.assign(parameter, this.queryParam)
+          return this.$http.get('/service', {
-                  }).then(res => {
+            params: Object.assign(parameter, this.queryParam)
-                    return res.result
+          }).then(res => {
-                  })
+            return res.result
-                },
+          })
-        	},
        },
-		methods: {
+      }
-			edit (row) {
+    },
-				// axios 发送数据到后端 修改数据成功后
+    methods: {
-				// 调用 refresh() 重新加载列表数据
+      edit(row) {
-				// 这里 setTimeout 模拟发起请求的网络延迟..
+        // axios 发送数据到后端 修改数据成功后
-				setTimeout (() => {
+        // 调用 refresh() 重新加载列表数据
-                    this.$refs.table.refresh()
+        // 这里 setTimeout 模拟发起请求的网络延迟..
-				}, 1500)
+        setTimeout(() => {
+          this.$refs.table.refresh()
-			}
+        }, 1500)
-		}
+      }
    }
+  }
 </script>
 ```
@@ -202,18 +207,18 @@ Table 重封装组件说明
 ```javascript
 result.then(r => {
-          this.localPagination = Object.assign({}, this.localPagination, {
+  this.localPagination = Object.assign({}, this.localPagination, {
-            current: r.pageNo,  // 返回结果中的当前分页数
+    current: r.pageNo,  // 返回结果中的当前分页数
-            total: r.totalCount, // 返回结果中的总记录数
+    total: r.totalCount, // 返回结果中的总记录数
-            showSizeChanger: this.showSizeChanger,
+    showSizeChanger: this.showSizeChanger,
-            pageSize: (pagination && pagination.pageSize) ||
+    pageSize: (pagination && pagination.pageSize) ||
-              this.localPagination.pageSize
+      this.localPagination.pageSize
-          });
+  });
-          !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
+  !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false)
-          this.localDataSource = r.data; // 返回结果中的数组数据
+  this.localDataSource = r.data; // 返回结果中的数组数据
-          this.localLoading = false
+  this.localLoading = false
-        });
+});
 ```
 返回 JSON 例子：
 ```json