feat: add document for AdvanceTable.vue; 🐛

新增：给 AdvanceTable.vue 增加说明文档；
2025-04-06 04:00:06 +08:00 · 2020-10-05 16:48:50 +08:00 · 2020-10-05 16:48:50 +08:00 · 3619242076
commit 3619242076
parent a4281b62dc
17 changed files with 488 additions and 150 deletions
--- a/package.json
+++ b/package.json
@ -22,15 +22,16 @@
    "core-js": "^3.6.5",
    "date-fns": "^2.14.0",
    "enquire.js": "^2.1.6",
+    "highlight.js": "^10.2.1",
    "js-cookie": "^2.2.1",
    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
    "viser-vue": "^2.4.8",
    "vue": "^2.6.11",
    "vue-i18n": "^8.18.2",
    "vue-router": "^3.3.4",
    "vuedraggable": "^2.23.2",
-    "vuex": "^3.4.0",
-    "nprogress": "^0.2.0"
+    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@ant-design/colors": "^4.0.1",
@ -39,7 +40,9 @@
    "@vue/cli-service": "^4.4.0",
    "@vuepress/plugin-back-to-top": "^1.5.2",
    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-polyfill": "^6.26.0",
+    "compression-webpack-plugin": "^2.0.0",
    "deepmerge": "^4.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
@ -51,9 +54,7 @@
    "vue-template-compiler": "^2.6.11",
    "vuepress": "^1.5.2",
    "webpack-theme-color-replacer": "^1.3.12",
-    "whatwg-fetch": "^3.0.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "babel-plugin-transform-remove-console": "^6.9.4"
+    "whatwg-fetch": "^3.0.0"
  },
  "eslintConfig": {
    "root": true,
--- a/src/components/table/advance/ActionColumns.vue
+++ b/src/components/table/advance/ActionColumns.vue
@ -1,6 +1,5 @@
 <template>
  <div class="action-columns" ref="root">
-    <a-tooltip title="列设置" :get-popup-container="() => $refs.root">
      <a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
        <div slot="title">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
@ -14,13 +13,13 @@
            </template>
            <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
            <template slot="actions">
-              <a-tooltip title="固定在列头" :get-popup-container="() => $refs.root">
+              <a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
              </a-tooltip>
-              <a-tooltip title="固定在列尾" :get-popup-container="() => $refs.root">
+              <a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
              </a-tooltip>
-              <a-tooltip title="添加搜索" :get-popup-container="() => $refs.root">
+              <a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
                <a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
              </a-tooltip>
            </template>
@ -28,7 +27,6 @@
        </a-list>
        <a-icon class="action" type="setting" />
      </a-popover>
-    </a-tooltip>
  </div>
 </template>

@ -87,12 +85,14 @@
      },
      setSearch(col) {
        this.$set(col, 'searchAble', !col.searchAble)
+        console.log(col)
        if (!col.searchAble && col.search) {
          this.resetSearch(col)
        }
      },
      resetSearch(col) {
-        col.search.value = col.dataType === 'boolean' ? false : undefined
+        // col.search.value = col.dataType === 'boolean' ? false : undefined
+        col.search.value = undefined
        col.search.backup = undefined
      },
      resetColumns() {
@ -114,7 +114,8 @@
          } else {
            this.$set(column, 'fixed', undefined)
          }
-          column.searchAble = back.searchAble
+          this.$set(column, 'searchAble', back.searchAble)
+          // column.searchAble = back.searchAble
          this.resetSearch(column)
        })
        this.checkedCounts = counts
--- a/src/components/table/advance/AdvanceTable.vue
+++ b/src/components/table/advance/AdvanceTable.vue
@ -8,7 +8,7 @@
        <template v-else>高级表格</template>
      </div>
      <div class="search">
-        <search-area @change="onSearchChange" :columns="columns" >
+        <search-area :format-conditions="formatConditions" @change="onSearchChange" :columns="columns" >
          <template :slot="slot" v-for="slot in slots">
            <slot :name="slot"></slot>
          </template>
@ -19,11 +19,13 @@
          <a-icon @click="refresh" class="action" :type="loading ? 'loading' : 'reload'" />
        </a-tooltip>
        <action-size v-model="sSize" class="action" />
+        <a-tooltip title="列配置">
          <action-columns :columns="columns" @reset="onColumnsReset" class="action">
            <template :slot="slot" v-for="slot in slots">
              <slot :name="slot"></slot>
            </template>
          </action-columns>
+        </a-tooltip>
        <a-tooltip title="全屏">
          <a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" />
        </a-tooltip>
@ -85,7 +87,8 @@
      customHeaderRow: Function,
      customRow: Function,
      getPopupContainer: Function,
-      transformCellText: Function
+      transformCellText: Function,
+      formatConditions: Boolean
    },
    provide() {
      return {
@ -97,7 +100,7 @@
        id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
        sSize: this.size || 'default',
        fullScreen: false,
-        conditions: []
+        conditions: {}
      }
    },
    computed: {
@ -118,9 +121,9 @@
      refresh() {
        this.$emit('refresh', this.conditions)
      },
-      onSearchChange(conditions) {
+      onSearchChange(conditions, searchOptions) {
        this.conditions = conditions
-        this.$emit('search', conditions)
+        this.$emit('search', conditions, searchOptions)
      },
      toggleScreen() {
        if (this.fullScreen) {
--- a/src/components/table/advance/SearchArea.vue
+++ b/src/components/table/advance/SearchArea.vue
@ -2,35 +2,36 @@
  <div class="search-area" ref="root">
    <div class="select-root" ref="selectRoot"></div>
    <div class="search-item" :key="index" v-for="(col, index) in searchCols">
-      <div v-if="col.dataType === 'boolean'" class="title active">
+      <div v-if="col.dataType === 'boolean'" :class="['title', {active: col.search.value !== undefined}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-        <a-switch @change="onSwitchChange" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
+        <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
+        <a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
      </div>
-      <div v-else-if="col.dataType === 'time'" class="title active">
+      <div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-        <a-time-picker v-model="col.search.value" placeholder="选择时间" @change="(time, timeStr) => onCalendarChange(time, timeStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="time-picker" size="small" :get-popup-container="() => $refs.root"/>
+        <a-time-picker :format="col.search.format" v-model="col.search.value" placeholder="选择时间" @change="(time, timeStr) => onCalendarChange(time, timeStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="time-picker" size="small" :get-popup-container="() => $refs.root"/>
      </div>
-      <div v-else-if="col.dataType === 'date'" class="title active">
+      <div v-else-if="col.dataType === 'date'" :class="['title', {active: col.search.value}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-        <a-date-picker v-model="col.search.value" @change="onDateChange(col)" class="date-picker" size="small" :getCalendarContainer="() => $refs.root"/>
+        <a-date-picker :format="col.search.format" v-model="col.search.value" @change="onDateChange(col)" class="date-picker" size="small" :getCalendarContainer="() => $refs.root"/>
      </div>
      <div v-else-if="col.dataType === 'datetime'" class="title datetime active">
        <template v-if="col.title">
          {{col.title}}:
        </template>
        <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-        <a-date-picker v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
+        <a-date-picker :format="col.search.format" v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
      </div>
-      <div v-else-if="col.dataType === 'select'" class="title active" >
+      <div v-else-if="col.dataType === 'select'" :class="['title', {active: col.search.value !== undefined}]">
        <template v-if="col.title">
          {{col.title}}:
        </template>
@ -38,23 +39,24 @@
        <a-select :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small" :get-popup-container="() => $refs.selectRoot">
        </a-select>
      </div>
-      <a-popover v-else @visibleChange="onVisibleChange(col, index)" v-model="col.search.visible" placement="bottom" :trigger="['click']" :get-popup-container="() => $refs.root">
-        <div :class="['title', {active: col.search.value}]">
+      <div v-else :class="['title', {active: col.search.value}]">
+        <a-popover @visibleChange="onVisibleChange(col, index)" v-model="col.search.visible" placement="bottom" :trigger="['click']" :get-popup-container="() => $refs.root">
          <template v-if="col.title">
            {{col.title}}
          </template>
          <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-          <div class="value " v-if="col.search.value">:&nbsp;&nbsp;{{col | searchValue}}</div>
-          <a-icon class="icon-down" type="down"/>
-        </div>
+          <div class="value " v-if="col.search.value">:&nbsp;&nbsp;{{col.search.format && typeof col.search.format === 'function' ? col.search.format(col.search.value) : col.search.value}}</div>
+          <a-icon v-if="!col.search.value" class="icon-down" type="down"/>
          <div class="operations" slot="content">
            <a-button @click="onCancel(col)" class="btn" size="small" type="link">取消</a-button>
            <a-button @click="onConfirm(col)" class="btn" size="small" type="primary">确认</a-button>
          </div>
          <div class="search-overlay" slot="title">
-          <a-input :id="`${searchIdPrefix}${index}`" :allow-clear="true" @keyup.esc="onCancel(col)" @keyup.enter="onConfirm(col)" v-model="col.search.value" size="default" />
+            <a-input :id="`${searchIdPrefix}${index}`" :allow-clear="true" @keyup.esc="onCancel(col)" @keyup.enter="onConfirm(col)" v-model="col.search.value" size="small" />
          </div>
        </a-popover>
+        <a-icon v-if="col.search.value" @click="e => onCloseClick(e, col)" class="close" type="close-circle" theme="filled"/>
+      </div>
    </div>
  </div>
 </template>
@ -65,35 +67,31 @@

  export default {
    name: 'SearchArea',
-    props: ['columns'],
+    props: ['columns', 'formatConditions'],
    inject: ['table'],
    created() {
      this.columns.forEach(item => {
-        this.$set(item, 'search', {...item.search, visible: false, value: item.dataType === 'boolean' ? false : undefined, format: this.getCalendarFormat(item)})
+        this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
      })
-    },
-    filters: {
-      searchValue(col) {
-        if (col.dataType === 'time' && col.search.value) {
-          return col.search.value.format('HH:mm:ss')
-        }
-        return col.search.value
-      }
+      console.log(this.columns)
    },
    watch: {
      searchCols(newVal, oldVal) {
        if (newVal.length != oldVal.length) {
          const newConditions = this.getConditions(newVal)
+          const newSearchOptions = this.getSearchOptions(newVal)
          if (!fastEqual(newConditions, this.conditions)) {
            this.conditions = newConditions
-            this.$emit('change', this.conditions)
+            this.searchOptions = newSearchOptions
+            this.$emit('change', this.conditions, this.searchOptions)
          }
        }
      }
    },
    data() {
      return {
-        conditions: []
+        conditions: {},
+        searchOptions: []
      }
    },
    computed: {
@ -105,72 +103,99 @@
      }
    },
    methods: {
+      onCloseClick(e, col) {
+        e.preventDefault()
+        e.stopPropagation()
+        col.search.value = undefined
+        const {backup, value} = col.search
+        if (backup !== value) {
+          this.backupAndEmitChange(col)
+        }
+      },
      onCancel(col) {
        col.search.value = col.search.backup
        col.search.visible = false
      },
      onConfirm(col) {
-        col.search.backup = col.search.value
+        const {backup, value} = col.search
        col.search.visible = false
-        const conditions = this.getConditions(this.searchCols)
-        if (!fastEqual(conditions, this.conditions)) {
-          this.conditions = conditions
-          this.$emit('change', this.conditions)
+        if (backup !== value) {
+          this.backupAndEmitChange(col)
        }
      },
-      onSwitchChange() {
-        this.conditions = this.getConditions(this.searchCols)
-        this.$emit('change', this.conditions)
+      onSwitchChange(col) {
+        const {backup, value} = col.search
+        if (backup !== value) {
+          this.backupAndEmitChange(col)
+        }
      },
-      onSelectChange() {
-        this.conditions = this.getConditions(this.searchCols)
-        this.$emit('change', this.conditions)
+      onSelectChange(col) {
+        this.backupAndEmitChange(col)
      },
      onCalendarOpenChange(open, col) {
        col.search.visible = open
-        const {momentEqual, getConditions} = this
+        const {momentEqual, backupAndEmitChange} = this
        const {value, backup, format} = col.search
        if (!open && !momentEqual(value, backup, format)) {
-          col.search.backup = moment(value)
-          this.conditions = getConditions(this.searchCols)
-          this.$emit('change', this.conditions)
+          backupAndEmitChange(col, moment(value))
        }
      },
      onCalendarChange(date, dateStr, col) {
-        const {momentEqual, getConditions} = this
+        const {momentEqual, backupAndEmitChange} = this
        const {value, backup, format} = col.search
        if (!col.search.visible && !momentEqual(value, backup, format)) {
-          col.search.backup = moment(value)
-          this.conditions = getConditions(this.searchCols)
-          this.$emit('change', this.conditions)
+          backupAndEmitChange(col, moment(value))
        }
      },
      onDateChange(col) {
-        const {momentEqual, getConditions} = this
-        const {value, backup} = col.search
-        if (!momentEqual(value, backup, 'YYYY-MM-DD')) {
-          col.search.backup = moment(value)
-          this.conditions = getConditions(this.searchCols)
-          this.$emit('change', this.conditions)
+        const {momentEqual, backupAndEmitChange} = this
+        const {value, backup, format} = col.search
+        if (!momentEqual(value, backup, format)) {
+          backupAndEmitChange(col, moment(value))
        }
      },
-      getCalendarFormat(col) {
+      getFormat(col) {
+        if (col.search && col.search.format) {
+          return col.search.format
+        }
        const dataType = col.dataType
        switch(dataType) {
          case 'time': return 'HH:mm:ss'
          case 'date': return 'YYYY-MM-DD'
          case 'datetime': return 'YYYY-MM-DD HH:mm:ss'
-          default: return col.search && col.search.format
+          default: return undefined
        }
      },
+      backupAndEmitChange(col, backValue = col.search.value) {
+        const {getConditions, getSearchOptions} = this
+        col.search.backup = backValue
+        this.conditions = getConditions(this.searchCols)
+        this.searchOptions = getSearchOptions(this.searchCols)
+        this.$emit('change', this.conditions, this.searchOptions)
+      },
      getConditions(columns) {
        const conditions = {}
        columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
          .forEach(col => {
-            conditions[col.dataIndex] = col.search.value
+            const {value, format} = col.search
+            if (this.formatConditions && format) {
+              if (typeof format === 'function') {
+                conditions[col.dataIndex] = format(col.search.value)
+              } else if (typeof format === 'string' && value.constructor.name === 'Moment') {
+                conditions[col.dataIndex] = value.format(format)
+              } else {
+                conditions[col.dataIndex] = value
+              }
+            } else {
+              conditions[col.dataIndex] = value
+            }
          })
        return conditions
      },
+      getSearchOptions(columns) {
+        return columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
+          .map(({dataIndex, search}) => ({field: dataIndex, value: search.value, format: search.format}))
+      },
      onVisibleChange(col, index) {
        if (!col.search.visible) {
          col.search.value = col.search.backup
@ -214,6 +239,15 @@
      user-select: none;
      display: inline-flex;
      align-items: center;
+      .close{
+        color: @text-color-second;
+        margin-left: 4px;
+        font-size: 12px;
+        vertical-align: middle;
+        :hover{
+          color: @text-color;
+        }
+      }
      .switch{
        margin-left: 4px;
      }
@ -233,6 +267,7 @@
        display: inline-block;
        overflow: hidden;
        flex:1;
+        vertical-align: middle;
        max-width: 144px;
        text-overflow: ellipsis;
        word-break: break-all;
@ -243,7 +278,7 @@
      }
    }
    .icon-down{
-      margin-left: 4px;
+      vertical-align: middle;
      font-size: 12px;
    }
  }
@ -259,6 +294,7 @@
  }
  .operations{
    display: flex;
+    margin: -6px 0;
    justify-content: space-between;
    .btn{
    }
--- a/src/components/table/api/ApiTable.vue
+++ b/src/components/table/api/ApiTable.vue
@ -0,0 +1,49 @@
+<template>
+  <a-table :data-source="apiSource" :pagination="false">
+    <h2 v-if="title" style="margin: 0 16px 0" slot="title">{{title}}</h2>
+    <a-table-column width="20%" data-index="param" title="参数">
+      <div slot-scope="text" v-html="text"></div>
+    </a-table-column>
+    <a-table-column width="50%" data-index="desc" title="说明">
+      <div slot-scope="text" v-html="text"></div>
+    </a-table-column>
+    <a-table-column v-if="isApi" width="15%" data-index="type" title="类型">
+      <div slot-scope="text" v-html="text"></div>
+    </a-table-column>
+    <a-table-column v-if="isApi" width="15%" data-index="default" title="默认值">
+      <div slot-scope="text" v-html="text"></div>
+    </a-table-column>
+    <a-table-column v-if="!isApi" width="30%" data-index="callback" title="回调函数">
+      <div slot-scope="text" v-html="text"></div>
+    </a-table-column>
+  </a-table>
+</template>
+
+<script>
+  export default {
+    name: 'ApiTable',
+    props: {
+      title: {
+        type: String,
+        default: 'API'
+      },
+      type: {
+        type: String,
+        default: 'api',
+        validator(value) {
+          return ['api', 'event'].includes(value)
+        }
+      },
+      apiSource: Array
+    },
+    computed: {
+      isApi() {
+        return this.type === 'api'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/src/mock/extend/index.js
+++ b/src/mock/extend/index.js
@ -50,6 +50,8 @@ const welcomeMessages = [
  }
 ]

+const goods = ['运动鞋', '短裤', 'T恤', '七分裤', '风衣', '寸衫']
+
 Random.extend({
  admin () {
    return this.pick(admins)
@ -69,6 +71,9 @@ Random.extend({
  position () {
    return this.pick(positions)
  },
+  goods () {
+    return this.pick(goods)
+  },
  saying () {
    return this.pick(sayings)
  },
--- a/src/mock/goods/index.js
+++ b/src/mock/goods/index.js
@ -0,0 +1,51 @@
+import Mock from 'mockjs'
+import '@/mock/extend'
+import {parseUrlParams} from '@/utils/request'
+
+const current = new Date().getTime()
+
+const goodsList = Mock.mock({
+  'list|100': [{
+    'id|+1': 0,
+    'name': '@GOODS',
+    'orderId': `${current}-@integer(1,100)`,
+    'status|1-4': 1,
+    'send': '@BOOLEAN',
+    'sendTime': '@DATETIME',
+    'orderDate': '@DATE',
+    'auditTime': '@TIME'
+  }]
+})
+
+Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/goods` + '.*'),'get', ({url}) => {
+  const params = parseUrlParams(decodeURI(url))
+  let {page, pageSize} = params
+  page = eval(page) - 1 || 0
+  pageSize = eval(pageSize) || 10
+  delete params.page
+  delete params.pageSize
+  let result = goodsList.list.filter(item => {
+    for (let [key, value] of Object.entries(params)) {
+      if (item[key] != value) {
+        return false
+      }
+    }
+    return true
+  })
+  const total = result.length
+  if ((page) * pageSize > total) {
+    result = []
+  } else {
+    result = result.slice(page * pageSize, (page + 1) * pageSize)
+  }
+  return {
+    code: 0,
+    message: 'success',
+    data: {
+      page: page + 1,
+      pageSize,
+      total,
+      list: result
+    }
+  }
+})
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -4,8 +4,9 @@ import '@/mock/project'
 import '@/mock/user/login'
 import '@/mock/workplace'
 import '@/mock/user/routes'
+import '@/mock/goods'

 // 设置全局延时
 Mock.setup({
-  timeout: '300-600'
+  timeout: '200-400'
 })
--- a/src/pages/components/table/Api.vue
+++ b/src/pages/components/table/Api.vue
@ -0,0 +1,152 @@
+<template>
+  <div class="api">
+    <div class="introduce">
+      <h2 class="title">说明</h2>
+      <p class="content">
+        AdvanceTable 是基于 Ant Design Vue Table 组件封装，支持其所有 API。<br/>
+        主要添加了<em>列设置</em>及<em>搜索控件配置</em>的功能，可用于一些需要动态配置表格展示、动态配置搜索条件的场景。<br/>
+        使用方式 与 antd table 基本无异。添加了部分API，如下：
+      </p>
+    </div>
+    <api-table :api-source="apiSource" />
+    <api-table type="event" title="事件" :api-source="events" />
+    <api-table title="Column" :api-source="columnApi" />
+    <api-table title="Search" :api-source="searchApi" />
+  </div>
+</template>
+
+<script>
+  import ApiTable from '@/components/table/api/ApiTable'
+  export default {
+    name: 'Api',
+    components: {ApiTable},
+    data() {
+      return {
+        apiSource: [
+          {
+            key: 0,
+            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table API</a>',
+            desc: '支持 Ant Design Vue Table 组件 所有 api',
+            type: '--',
+            default: '--',
+          },
+          {
+            key: 1,
+            param: 'title',
+            desc: '表格标题',
+            type: 'string | slot',
+            default: '\'高级表格\''
+          },
+          {
+            key: 2,
+            param: 'formatConditions',
+            desc: `是否格式化搜索条件的值，格式化规则参考 <a>Search 配置</a>。
+                   <br/>false：取搜索输入控件的原值 <br/>true：取搜索输入控件格式化后的值`,
+            type: 'boolean',
+            default: 'false',
+          },
+          {
+            key: 3,
+            param: 'columns',
+            desc: `表格列配置，参考 <a>Column 配置</a>`,
+            type: 'array',
+            default: '--',
+          }
+        ],
+        events: [
+          {
+            key: 0,
+            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Events API</a>',
+            desc: '支持 Ant Design Vue Table 所有事件',
+            callback: '--',
+          },
+          {
+            key: 1,
+            param: 'search',
+            desc: '搜索条件变化时触发',
+            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
+          },
+          {
+            key: 2,
+            param: 'refresh',
+            desc: '表头刷新图标点击时触发',
+            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
+          },
+          {
+            key: 3,
+            param: 'reset',
+            desc: '列配置重置按钮点击时触发',
+            callback: 'Function(conditions, searchOptions: [{field, value, format}])',
+          },
+        ],
+        columnApi: [
+          {
+            key: 0,
+            param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Column API</a>',
+            desc: '支持 Ant Design Vue Table 组件 Column 配置所有 api',
+            type: '--',
+            default: '--'
+          },
+          {
+            key: 1,
+            param: 'searchAble',
+            desc: '是否启用列搜索',
+            type: 'boolean',
+            default: 'false'
+          },
+          {
+            key: 2,
+            param: 'dataType',
+            desc: `数据类型，该配置将决定列搜索输入控件的类型，与列搜索输入控件对应关系如下：<br/>
+                   string: 输入框组件<br/>
+                   boolean: 开关组件<br/>
+                   select: 下拉输入框组件<br/>
+                   date: 日期选择器<br/>
+                   time: 时间选择器<br/>
+                   datetime: 带时间选择器的日期选择器`,
+            type: `'string' | 'boolean' | 'select' | 'date' | 'time' | 'datetime'`,
+            default: `'string'`
+          },
+          {
+            key: 3,
+            param: 'search',
+            desc: '列搜索配置，参考 <a>Search 配置</a>',
+            type: 'object',
+            default: '--'
+          },
+        ],
+        searchApi: [
+          {
+            key: 0,
+            param: 'format',
+            desc: `列搜索输入控件值的格式化配置。<br/>如果输入控件支持格式化，则可设置该值为字符串，如日期输入组件，可设为为 'YYYY-MM-DD'。
+                   <br/>不支持格式化的输入控件，可设置为一个接收控件的输入值作为参数的函数，如 (value) => {return \`prefix\${value}\`}。`,
+            type: 'string | Function(value)',
+            default: '取输入控件默认的格式化配置'
+          },
+          {
+            key: 1,
+            param: 'selectOptions',
+            desc: `select 数据类型的下拉输入组件的选项配置，可参考 <a href="https://www.antdv.com/components/select-cn/#API" target="_blank">Ant Design Vue Select Option props Api</a>`,
+            type: 'array',
+            default: '--'
+          }
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.api{
+  .introduce{
+    padding: 16px;
+    .content{
+      em{
+        margin: 0 4px;
+        color: @primary-color;
+      }
+    }
+  }
+}
+</style>
--- a/src/pages/components/table/Table.vue
+++ b/src/pages/components/table/Table.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="table">
    <advance-table
      :columns="columns"
      :data-source="dataSource"
@ -8,7 +8,19 @@
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
+      :format-conditions="true"
      @reset="onReset"
+      :pagination="{
+        current: page,
+        pageSize: pageSize,
+        total: total,
+        showSizeChanger: true,
+        showLessItems: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
+        onChange: onPageChange,
+        onShowSizeChange: onSizeChange,
+      }"
    >
      <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
@ -20,31 +32,18 @@
        {{text | statusStr}}
      </template>
    </advance-table>
+    <api />
  </div>
 </template>

 <script>
  import AdvanceTable from '@/components/table/advance/AdvanceTable'
-  import moment from 'moment'
+  import {dataSource as ds} from '@/services'
+  import Api from '@/pages/components/table/Api'

-  const goods = ['运动鞋', 'T恤', '长裤', '短裤']
-  const dataSource = []
-  const current = new Date().getTime()
-  for (let i = 0; i < 100; i++) {
-    dataSource.push({
-      id: i,
-      name: goods[Math.floor((Math.random() * 4))],
-      orderId: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
-      status: Math.floor((Math.random() * 4) + 1),
-      send: (i % 2) === 1,
-      sendTime: moment(current -  Math.floor((Math.random() * 8000000))).format('YYYY-MM-DD HH:mm:ss'),
-      orderDate: moment(current -  Math.floor((Math.random() * 800000000))).format('YYYY-MM-DD'),
-      auditTime: moment(current -  Math.floor((Math.random() * 8000000))).format('HH:mm:ss'),
-    })
-  }
  export default {
    name: 'Table',
-    components: {AdvanceTable},
+    components: {Api, AdvanceTable},
    filters: {
      statusStr(val) {
        switch (val) {
@ -58,6 +57,9 @@
    data() {
      return {
        loading: false,
+        page: 1,
+        pageSize: 10,
+        total: 0,
        columns: [
          {
            title: '商品名称',
@ -103,66 +105,62 @@
          },
          {
            title: '审核时间',
-            searchAble: true,
            dataIndex: 'auditTime',
            dataType: 'time',
          },
        ],
-        dataSource: dataSource
+        dataSource: [],
+        conditions: {}
      }
    },
+    created() {
+      this.getGoodList()
+    },
    methods: {
-      onSearch(conditions) {
+      getGoodList() {
        this.loading = true
-        this.searchGoods(conditions).then(result => {
-          this.dataSource = result
+        const {page, pageSize, conditions} = this
+        ds.goodsList({page, pageSize, ...conditions}).then(result => {
+          const {list, page, pageSize, total} = result.data.data
+          this.dataSource = list
+          this.page = page
+          this.total = total
+          this.pageSize = pageSize
          this.loading = false
        })
      },
+      onSearch(conditions, searchOptions) {
+        console.log(conditions)
+        console.log(searchOptions)
+        this.page = 1
+        this.conditions = conditions
+        this.getGoodList()
+      },
+      onSizeChange(current, size) {
+        this.page = 1
+        this.pageSize = size
+        this.getGoodList()
+      },
      onRefresh(conditions) {
-        this.loading = true
-        this.searchGoods(conditions).then(result => {
-          this.dataSource = result
-          this.loading = false
-        })
+        this.conditions = conditions
+        this.getGoodList()
      },
      onReset(conditions) {
-        this.loading = true
-        this.searchGoods(conditions).then(result => {
-          this.dataSource = result
-          this.loading = false
-        })
+        this.conditions = conditions
+        this.getGoodList()
      },
-      async searchGoods(conditions) {
-        const promise = new Promise((resolve, reject) => {
-          try {
-            const result = dataSource.filter(item => {
-              for (let key of Object.keys(conditions)) {
-                if (key === 'sendTime') {
-                   if (conditions[key].format('YYYY-MM-DD HH:mm:ss') !== item[key]) return false
-                } else if (key === 'orderDate') {
-                  if (conditions[key].format('YYYY-MM-DD') !== item[key]) return false
-                } else if (key === 'auditTime') {
-                  if (conditions[key].format('HH:mm:ss') !== item[key]) return false
-                } else if (item[key] !== conditions[key]) {
-                  return false
-                }
-              }
-              return true
-            })
-            setTimeout(() => {
-              resolve(result)
-            }, 300)
-          } catch (e) {
-            reject(e)
-          }
-        })
-        return promise
+      onPageChange(page, pageSize) {
+        this.page = page
+        this.pageSize = pageSize
+        this.getGoodList()
      }
    }
  }
 </script>

-<style scoped>
-
+<style scoped lang="less">
+.table{
+  background-color: @base-bg-color;
+  padding: 24px;
+}
 </style>
--- a/src/pages/components/table/index.js
+++ b/src/pages/components/table/index.js
@ -0,0 +1,2 @@
+import Table from './Table'
+export default Table
--- a/src/router/config.js
+++ b/src/router/config.js
@ -193,7 +193,7 @@ const options = {
        },
        {
          path: 'components',
-          name: '小组件',
+          name: '内置组件',
          meta: {
            icon: 'appstore-o'
          },
@ -212,7 +212,7 @@ const options = {
            {
              path: 'table',
              name: '高级表格',
-              component: () => import('@/pages/components/Table')
+              component: () => import('@/pages/components/table')
            }
          ]
        },
--- a/src/services/api.js
+++ b/src/services/api.js
@ -4,5 +4,6 @@
 const BASE_URL = process.env.VUE_APP_API_BASE_URL
 module.exports = {
  LOGIN: `${BASE_URL}/login`,
-  ROUTES: `${BASE_URL}/routes`
+  ROUTES: `${BASE_URL}/routes`,
+  GOODS: `${BASE_URL}/goods`,
 }
--- a/src/services/dataSource.js
+++ b/src/services/dataSource.js
@ -0,0 +1,8 @@
+import {GOODS} from './api'
+import {METHOD, request} from '@/utils/request'
+
+export async function goodsList(params) {
+  return request(GOODS, METHOD.GET, params)
+}
+
+export default {goodsList}
--- a/src/services/index.js
+++ b/src/services/index.js
@ -1,5 +1,7 @@
 import userService from './user'
+import dataSource from './dataSource'

 export {
-  userService
+  userService,
+  dataSource
 }
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -134,6 +134,28 @@ function loadInterceptors(interceptors, options) {
  })
 }

+/**
+ * 解析 url 中的参数
+ * @param url
+ * @returns {Object}
+ */
+function parseUrlParams(url) {
+  const params = {}
+  if (!url || url === '' || typeof url !== 'string') {
+    return params
+  }
+  const paramsStr = url.split('?')[1]
+  if (!paramsStr) {
+    return params
+  }
+  const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
+  for (let i = 0; i < paramsArr.length / 2; i++) {
+    const value = paramsArr[i * 2 + 1]
+    params[paramsArr[i * 2]] = value === 'true' ? true : (value === 'false' ? false : value)
+  }
+  return params
+}
+
 export {
  METHOD,
  AUTH_TYPE,
@ -141,5 +163,6 @@ export {
  setAuthorization,
  removeAuthorization,
  checkAuthorization,
-  loadInterceptors
+  loadInterceptors,
+  parseUrlParams
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -5302,6 +5302,11 @@ hex-color-regex@^1.1.0:
  resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
  integrity sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4=

+highlight.js@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.2.1.tgz#09784fe2e95612abbefd510948945d4fe6fa9668"
+  integrity sha1-CXhP4ulWEqu+/VEJSJRdT+b6lmg=
+
 highlight.js@^9.6.0:
  version "9.18.1"
  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"