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..88ad6d55
--- /dev/null
+++ b/src/mock/demo/business/table/1/index.js
@@ -0,0 +1,20 @@
+import Mock from 'mockjs'
+
+Mock.mock('/api/demo/business/table/1', ({ body }) => {
+  // 这是通过 post 传来的参数
+  body = JSON.parse(body)
+  return Mock.mock(
+    {
+      'list|30': [{
+        '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/table/1/componnets/PageHeader/index.vue b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
index 00eb48a3..66641ef3 100644
--- a/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageHeader/index.vue
@@ -1,5 +1,95 @@
 <template>
-  <div>
-    header
-  </div>
+  <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>
+        <el-option label="状态 2" value="2"></el-option>
+        <el-option label="状态 3" value="3"></el-option>
+        <el-option label="状态 4" value="4"></el-option>
+        <el-option label="状态 5" value="5"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="用户" prop="user">
+      <el-input
+        v-model="form.user"
+        placeholder="用户"
+        style="width: 80px;"/>
+    </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="submitForm('form')">
+        <d2-icon name="search"/>
+        查询
+      </el-button>
+    </el-form-item>
+
+    <el-form-item>
+      <el-button
+        @click="resetForm('form')">
+        <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: {
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.form)
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm (formName) {
+      this.$refs[formName].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
index fe504e93..e37434be 100644
--- a/src/pages/demo/business/table/1/componnets/PageMain/index.vue
+++ b/src/pages/demo/business/table/1/componnets/PageMain/index.vue
@@ -1,5 +1,110 @@
 <template>
-  <div>
-    main
-  </div>
+  <el-table
+    :data="currentTableData"
+    size="mini"
+    stripe
+    style="width: 100%">
+
+    <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="info">
+          {{scope.row.value}}
+        </el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="状态" width="260" align="center">
+      <template slot-scope="scope">
+        <el-popover
+          placement="left"
+          title="切换状态"
+          width="200"
+          trigger="hover">
+          <el-switch
+            v-model="currentTableData[scope.$index].type"
+            active-color="#67C23A"
+            inactive-color="#F56C6C"
+            active-text="正常"
+            inactive-text="禁用"
+            @change="(val) => {
+              handleSwitchChange(val, scope.$index)
+            }">
+          </el-switch>
+          <el-tag slot="reference" size="mini">
+            {{scope.row.type}}
+          </el-tag>
+        </el-popover>
+      </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 v-if="scope.row.used" type="mini">已经使用</el-tag>
+        <el-tag v-else type="mini">未使用</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>
 </template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      currentTableData: []
+    }
+  },
+  watch: {
+    tableData: {
+      handler (val) {
+        this.currentTableData = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleSwitchChange (val, index) {
+      console.log('val', val)
+      console.log('index', index)
+    }
+  }
+}
+</script>
+
diff --git a/src/pages/demo/business/table/1/index.vue b/src/pages/demo/business/table/1/index.vue
index 6aa6031d..459092a2 100644
--- a/src/pages/demo/business/table/1/index.vue
+++ b/src/pages/demo/business/table/1/index.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container>
-    <demo-page-header slot="header"/>
-    <demo-page-main/>
+    <demo-page-header slot="header" @submit="handleSubmit"/>
+    <demo-page-main :table-data="table"/>
     <demo-page-footer slot="footer"/>
   </d2-container>
 </template>
@@ -12,6 +12,22 @@ export default {
     'DemoPageHeader': () => import('./componnets/PageHeader'),
     'DemoPageMain': () => import('./componnets/PageMain'),
     'DemoPageFooter': () => import('./componnets/PageFooter')
+  },
+  data () {
+    return {
+      table: []
+    }
+  },
+  methods: {
+    handleSubmit (form) {
+      this.$axios.post('/api/demo/business/table/1', form)
+        .then(res => {
+          this.table = res.list
+        })
+        .catch(err => {
+          console.log('err', err)
+        })
+    }
   }
 }
 </script>