diff --git a/src/menu/index.js b/src/menu/index.js
index 51e51931..75ae0482 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -8,6 +8,8 @@ import demoCharts from './modules/demo-charts'
 import demoElement from './modules/demo-element'
 // 试验台
 import demoPlayground from './modules/demo-playground'
+// 示例
+import demoBusiness from './modules/demo-business'
 
 // 菜单 侧边栏
 export const menuAside = [
@@ -15,7 +17,8 @@ export const menuAside = [
   demoPlugins,
   demoCharts,
   demoElement,
-  demoPlayground
+  demoPlayground,
+  demoBusiness
 ]
 
 // 菜单 顶栏
@@ -26,7 +29,6 @@ export const menuHeader = [
     icon: 'home'
   },
   {
-    path: '/demo',
     title: '功能',
     icon: 'puzzle-piece',
     children: [
@@ -51,5 +53,6 @@ export const menuHeader = [
         ]
       }
     ]
-  }
+  },
+  demoBusiness
 ]
diff --git a/src/menu/modules/demo-business.js b/src/menu/modules/demo-business.js
new file mode 100644
index 00000000..78724af8
--- /dev/null
+++ b/src/menu/modules/demo-business.js
@@ -0,0 +1,15 @@
+export default {
+  path: '/demo/business',
+  title: '示例',
+  icon: 'flask',
+  children: (pre => [
+    { path: `${pre}index`, title: '示例首页', icon: 'home' },
+    {
+      title: '表格',
+      icon: 'table',
+      children: [
+        { path: `${pre}table/1`, title: '表格 1' }
+      ]
+    }
+  ])('/demo/business/')
+}
diff --git a/src/mock/demo/business/table/1/index.js b/src/mock/demo/business/table/1/index.js
new file mode 100644
index 00000000..7c8d2621
--- /dev/null
+++ b/src/mock/demo/business/table/1/index.js
@@ -0,0 +1,23 @@
+import Mock from 'mockjs'
+
+Mock.mock('/api/demo/business/table/1', ({ body }) => {
+  // 这是通过 post 传来的参数
+  body = JSON.parse(body)
+  const { page } = body
+  page.total = 1000
+  return Mock.mock(
+    {
+      page,
+      'list|20': [{
+        'key': '@guid',
+        'value|1': [10, 100, 200, 500],
+        'type': '@boolean',
+        'admin': '@cname',
+        'adminNote': '@cparagraph(0.5)',
+        'dateTimeCreat': '@datetime',
+        'used': '@boolean',
+        'dateTimeUse': '@datetime'
+      }]
+    }
+  )
+})
diff --git a/src/mock/register.js b/src/mock/register.js
index 10582b39..b72817ac 100644
--- a/src/mock/register.js
+++ b/src/mock/register.js
@@ -2,6 +2,8 @@ import Mock from 'mockjs'
 
 import '@/mock/ajax-demo'
 
+import '@/mock/demo/business/table/1'
+
 import '@/mock/login'
 
 // 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
diff --git a/src/pages/demo/business/index/image/icon.png.REMOVED.git-id b/src/pages/demo/business/index/image/icon.png.REMOVED.git-id
new file mode 100644
index 00000000..101ae465
--- /dev/null
+++ b/src/pages/demo/business/index/image/icon.png.REMOVED.git-id
@@ -0,0 +1 @@
+ba00e3c1f32cf9369968e9ce1a5d9e6164f3c07c
\ No newline at end of file
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
new file mode 100644
index 00000000..b895748f
--- /dev/null
+++ b/src/pages/demo/business/index/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <d2-container>
+    <d2-page-cover
+      title="图表"
+      sub-title="集成图表组件">
+      <img src="./image/icon.png">
+    </d2-page-cover>
+  </d2-container>
+</template>
diff --git a/src/pages/demo/business/table/1/componnets/BooleanControl/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
new file mode 100644
index 00000000..91856e9a
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/BooleanControl/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-popover
+    :placement="popoverPlacement"
+    :title="popoverTitle"
+    :width="popoverWidth"
+    trigger="hover">
+    <el-switch
+      v-model="currentValue"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :disabled="disabled"
+      @change="handleChange">
+    </el-switch>
+    <span slot="reference">
+      <slot v-if="value" name="active"/>
+      <slot v-else name="inactive"/>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    },
+    popoverPlacement: {
+      default: 'left'
+    },
+    popoverTitle: {
+      default: '修改'
+    },
+    popoverWidth: {
+      default: '150'
+    },
+    activeColor: {
+      default: '#67C23A'
+    },
+    inactiveColor: {
+      default: '#F56C6C'
+    },
+    activeText: {
+      default: '正常'
+    },
+    inactiveText: {
+      default: '禁用'
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      disabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange (val) {
+      this.disabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.disabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue b/src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
new file mode 100644
index 00000000..9bfebbe2
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/BooleanControlMini/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <span slot="reference">
+    <d2-icon
+      v-if="disabled"
+      name="hourglass-start"
+      style="font-size: 14px; line-height: 32px; color: #909399;"/>
+    <span @click="handleClick">
+      <slot
+        v-if="!disabled && value"
+        name="active"/>
+      <slot
+        v-if="!disabled && !value"
+        name="inactive"/>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      disabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick () {
+      // 这里先赋值是为了和 TypeControl 使用一样的 handleChange
+      this.currentValue = !this.currentValue
+      this.handleChange(this.currentValue)
+    },
+    handleChange (val) {
+      this.disabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.disabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/PageFooter/index.vue b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
new file mode 100644
index 00000000..46df4540
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageFooter/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-pagination
+    :current-page="current"
+    :page-size="size"
+    :total="total"
+    :page-sizes="[100, 200, 300, 400]"
+    layout="total, sizes, prev, pager, next, jumper"
+    style="margin: -10px;"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange">
+  </el-pagination>
+</template>
+
+<script>
+export default {
+  props: {
+    current: {
+      default: 0
+    },
+    size: {
+      default: 0
+    },
+    total: {
+      default: 0
+    }
+  },
+  methods: {
+    handleSizeChange (val) {
+      this.$emit('change', {
+        current: this.current,
+        size: val,
+        total: this.total
+      })
+    },
+    handleCurrentChange (val) {
+      this.$emit('change', {
+        current: val,
+        size: this.size,
+        total: this.total
+      })
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
new file mode 100644
index 00000000..2cd13cac
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-form
+    :inline="true"
+    :model="form"
+    :rules="rules"
+    ref="form"
+    size="mini"
+    style="margin-bottom: -18px;">
+
+    <el-form-item label="状态" prop="type">
+      <el-select
+        v-model="form.type"
+        placeholder="状态选择"
+        style="width: 100px;">
+        <el-option label="状态 1" value="1"/>
+        <el-option label="状态 2" value="2"/>
+        <el-option label="状态 3" value="3"/>
+        <el-option label="状态 4" value="4"/>
+        <el-option label="状态 5" value="5"/>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="用户" prop="user">
+      <el-input
+        v-model="form.user"
+        placeholder="用户"
+        style="width: 100px;"/>
+    </el-form-item>
+
+    <el-form-item label="卡密" prop="key">
+      <el-input
+        v-model="form.key"
+        placeholder="卡密"
+        style="width: 120px;"/>
+    </el-form-item>
+
+    <el-form-item label="备注" prop="note">
+      <el-input
+        v-model="form.note"
+        placeholder="备注"
+        style="width: 120px;"/>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        type="primary"
+        @click="handleFormSubmit">
+        <d2-icon name="search"/>
+        查询
+      </el-button>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        @click="handleFormReset">
+        <d2-icon name="refresh"/>
+        重置
+      </el-button>
+    </el-form-item>
+
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      form: {
+        type: '1',
+        user: 'FairyEver',
+        key: '',
+        note: ''
+      },
+      rules: {
+        type: [ { required: true, message: '请选择一个状态', trigger: 'change' } ],
+        user: [ { required: true, message: '请输入用户', trigger: 'change' } ]
+      }
+    }
+  },
+  methods: {
+    handleFormSubmit () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.form)
+        } else {
+          this.$notify.error({
+            title: '错误',
+            message: '表单校验失败'
+          })
+          return false
+        }
+      })
+    },
+    handleFormReset () {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/componnets/PageMain/index.vue b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
new file mode 100644
index 00000000..d4bbd40e
--- /dev/null
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <el-form
+      :inline="true"
+      size="mini">
+      <el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadXlsx(currentTableData)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="currentTableData.length === 0"
+            @click="handleDownloadCsv(currentTableData)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+      <el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadXlsx(multipleSelection)">
+            xlsx
+          </el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="multipleSelection.length === 0"
+            @click="handleDownloadCsv(multipleSelection)">
+            csv
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      :data="currentTableData"
+      v-loading="loading"
+      size="mini"
+      stripe
+      style="width: 100%;"
+      @selection-change="handleSelectionChange">
+
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+
+      <el-table-column label="卡密" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.key}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="面值" width="60" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            type="success">
+            {{scope.row.value}}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" width="50" align="center">
+        <template slot-scope="scope">
+          <boolean-control-mini
+            :value="scope.row.type"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+            <d2-icon
+              name="check-circle"
+              style="font-size: 20px; line-height: 32px; color: #67C23A;"
+              slot="active"/>
+            <d2-icon
+              name="times-circle"
+              style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+              slot="inactive"/>
+          </boolean-control-mini>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="管理员" width="60">
+        <template slot-scope="scope">
+          {{scope.row.admin}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="管理员备注" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.adminNote}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeCreat}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="使用状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            size="mini"
+            :type="scope.row.used ? 'info' : ''">
+            {{scope.row.used ? '已使用' : '未使用'}}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          {{scope.row.dateTimeUse}}
+        </template>
+      </el-table-column>
+
+    </el-table>
+  </div>
+</template>
+
+<script>
+import BooleanControl from '../BooleanControl'
+import BooleanControlMini from '../BooleanControlMini'
+export default {
+  components: {
+    BooleanControl,
+    BooleanControlMini
+  },
+  props: {
+    tableData: {
+      default: () => []
+    },
+    loading: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentTableData: [],
+      multipleSelection: [],
+      downloadColumns: [
+        { label: '卡密', prop: 'key' },
+        { label: '面值', prop: 'value' },
+        { label: '状态', prop: 'type' },
+        { label: '管理员', prop: 'admin' },
+        { label: '管理员备注', prop: 'adminNote' },
+        { label: '创建时间', prop: 'dateTimeCreat' },
+        { label: '使用状态', prop: 'used' },
+        { label: '使用时间', prop: 'dateTimeUse' }
+      ]
+    }
+  },
+  watch: {
+    tableData: {
+      handler (val) {
+        this.currentTableData = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleSwitchChange (val, index) {
+      const oldValue = this.currentTableData[index]
+      this.$set(this.currentTableData, index, {
+        ...oldValue,
+        type: val
+      })
+      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    downloadDataTranslate (data) {
+      return data.map(row => ({
+        ...row,
+        type: row.type ? '禁用' : '正常',
+        used: row.used ? '已使用' : '未使用'
+      }))
+    },
+    handleDownloadXlsx (data) {
+      this.$export.excel({
+        title: 'D2Admin 表格示例',
+        columns: this.downloadColumns,
+        data: this.downloadDataTranslate(data)
+      })
+        .then(() => {
+          this.$message('导出表格成功')
+        })
+    },
+    handleDownloadCsv (data) {
+      this.$export.csv({
+        title: 'D2Admin 表格示例',
+        columns: this.downloadColumns,
+        data: this.downloadDataTranslate(data)
+      })
+        .then(() => {
+          this.$message('导出CSV成功')
+        })
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
new file mode 100644
index 00000000..0bd5cd09
--- /dev/null
+++ b/src/pages/demo/business/table/1/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <d2-container>
+    <demo-page-header
+      slot="header"
+      @submit="handleSubmit"
+      ref="header"/>
+    <demo-page-main
+      :table-data="table"
+      :loading="loading"/>
+    <demo-page-footer
+      slot="footer"
+      :current="page.current"
+      :size="page.size"
+      :total="page.total"
+      @change="handlePaginationChange"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  // name 值和本页的 $route.name 一致才可以缓存页面
+  name: 'demo-business-table-1',
+  components: {
+    'DemoPageHeader': () => import('./componnets/PageHeader'),
+    'DemoPageMain': () => import('./componnets/PageMain'),
+    'DemoPageFooter': () => import('./componnets/PageFooter')
+  },
+  data () {
+    return {
+      table: [],
+      loading: false,
+      page: {
+        current: 1,
+        size: 100,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    handlePaginationChange (val) {
+      this.$notify({
+        title: '分页变化',
+        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
+      })
+      this.page = val
+      // nextTick 只是为了优化示例中 notify 的显示
+      this.$nextTick(() => {
+        this.$refs.header.handleFormSubmit()
+      })
+    },
+    handleSubmit (form) {
+      this.loading = true
+      this.$notify({
+        title: '开始请求模拟表格数据'
+      })
+      this.$axios.post('/api/demo/business/table/1', {
+        ...form,
+        page: this.page
+      })
+        .then(res => {
+          this.loading = false
+          this.$notify({
+            title: '模拟表格数据请求完毕'
+          })
+          this.table = res.list
+          this.page = res.page
+        })
+        .catch(err => {
+          this.loading = false
+          this.$notify({
+            title: '模拟表格数据请求异常'
+          })
+          console.log('err', err)
+        })
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/playground/env/index.vue b/src/pages/demo/playground/env/index.vue
index 8ed20ace..1da4ba51 100644
--- a/src/pages/demo/playground/env/index.vue
+++ b/src/pages/demo/playground/env/index.vue
@@ -18,4 +18,3 @@ export default {
   }
 }
 </script>
-
diff --git a/src/pages/error-page-404/page.vue b/src/pages/error-page-404/page.vue
index d8f1215e..a1c7843a 100644
--- a/src/pages/error-page-404/page.vue
+++ b/src/pages/error-page-404/page.vue
@@ -10,7 +10,7 @@
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
 .page-404 {
-  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
+  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
   background-blend-mode: multiply,multiply;
   height: 100%;
   display: flex;
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index 1e67b886..21708707 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-0fa9b5a2bdc57841e4f19831dc3e2a913399a280
\ No newline at end of file
+b3aa52d67ec41a212ff824829e2d713f2c21111c
\ No newline at end of file