From 4bb34221487169abe5da5dc3f4d192535c6a8069 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Sun, 22 Jul 2018 18:35:37 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly 096c7586394466fcfa6aeef76f941c65b6c58cb3 [formerly 6ea50546558bb7a5f54d99d34301d3fbae8beea4]]]]]
Former-commit-id: 4909868f8dac1be92c76feda0bc3c4a51f8221ca
Former-commit-id: 7bcf816a13380e5e1823ef3d8a0050fa95842c73
Former-commit-id: cea58af19fb83f6e4f61a7cc95e999706784a7f2 [formerly 881c7fe80386e4bbd6bdd323eb873c98e7894941]
Former-commit-id: edf39aef375f7ecf4d07951f57b8a92baab4ee37
Former-commit-id: 829a819ac72421f791a5cf5a4d62b7a860e7648b
Former-commit-id: e3da2e3e4a6f41a5a712760729560efdcf551a3f
Former-commit-id: 57e8f1b908c2578a985798a6672a650b9dc53c0c
Former-commit-id: 9667afc9b61cdbc5c624a07ee92b4156d0470582
---
 docs/zh/guide/change-log.md                   |   2 +
 docs/zh/others/css.md                         |   6 +-
 .../style/theme/theme.scss.REMOVED.git-id     |   2 +-
 .../container/components/d2-demo-article.vue  |   1 -
 .../data-table/components/table1/index.vue    |  49 +++++++
 .../data-table/components/table10/index.vue   |  69 +++++++++
 .../data-table/components/table11/index.vue   |  88 ++++++++++++
 .../data-table/components/table12/index.vue   |  57 ++++++++
 .../data-table/components/table13/index.vue   |  81 +++++++++++
 .../data-table/components/table14/index.vue   |  73 ++++++++++
 .../data-table/components/table15/index.vue   | 103 ++++++++++++++
 .../data-table/components/table16/index.vue   | 131 ++++++++++++++++++
 .../data-table/components/table17/index.vue   | 129 +++++++++++++++++
 .../data-table/components/table18/index.vue   |  72 ++++++++++
 .../data-table/components/table2/index.vue    |  48 +++++++
 .../data-table/components/table3/index.vue    |  48 +++++++
 .../data-table/components/table4/index.vue    |  67 +++++++++
 .../data-table/components/table5/index.vue    |  61 ++++++++
 .../data-table/components/table6/index.vue    |  91 ++++++++++++
 .../data-table/components/table7/index.vue    |  98 +++++++++++++
 .../data-table/components/table8/index.vue    | 116 ++++++++++++++++
 .../data-table/components/table9/index.vue    | 100 +++++++++++++
 src/pages/demo/element/data-table/index.vue   |  61 +++-----
 23 files changed, 1509 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/demo/element/data-table/components/table1/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table10/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table11/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table12/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table13/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table14/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table15/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table16/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table17/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table18/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table2/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table3/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table4/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table5/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table6/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table7/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table8/index.vue
 create mode 100644 src/pages/demo/element/data-table/components/table9/index.vue

diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
index 6faf657f..ad758b71 100644
--- a/docs/zh/guide/change-log.md
+++ b/docs/zh/guide/change-log.md
@@ -24,6 +24,8 @@
 * [ 新增 ] 持久化存储根据系统版本区分数据，防止因更新导致数据错乱
 * [ 修改 ] token 和 uuid 读写删规范化，保存的时候增加版本号区分
 * [ 新增 ] 注销画面灰度效果
+* [ 新增 ] .d2-card 样式类，可以让 el-card 具有跟随主题变化的样式
+* [ 新增 ] ElementUI 表格组件全部示例移植
 
 ## v1.1.4
 
diff --git a/docs/zh/others/css.md b/docs/zh/others/css.md
index 8e5ff929..1ca48b9a 100644
--- a/docs/zh/others/css.md
+++ b/docs/zh/others/css.md
@@ -9,7 +9,11 @@
 `.d2-card` 示例
 
 ``` vue
-<el-card shadow="never" class="d2-card"></el-card>
+<el-card shadow="never" class="d2-card">
+  <template slot="header">header</template>
+  body
+</el-card>
+<!-- 快看 我的边框和 header 边框会随着主题切换样式！ -->
 ```
 
 ## 文字
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 1f2b5ba2..2ea44f9c 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-d7807eecc7082d138c70f222eb3834c6ad63c366
\ No newline at end of file
+4de0cf35d6c48da3ab573596be724d71292d8440
\ No newline at end of file
diff --git a/src/pages/demo/components/container/components/d2-demo-article.vue b/src/pages/demo/components/container/components/d2-demo-article.vue
index 1d77d8fc..45a0ed6e 100644
--- a/src/pages/demo/components/container/components/d2-demo-article.vue
+++ b/src/pages/demo/components/container/components/d2-demo-article.vue
@@ -35,4 +35,3 @@ export default {
   background-color: #f4f4f5;
 }
 </style>
-
diff --git a/src/pages/demo/element/data-table/components/table1/index.vue b/src/pages/demo/element/data-table/components/table1/index.vue
new file mode 100644
index 00000000..1df759b4
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table1/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '基础表格',
+  data () {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table10/index.vue b/src/pages/demo/element/data-table/components/table10/index.vue
new file mode 100644
index 00000000..70ad801d
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table10/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-table
+      ref="singleTable"
+      :data="tableData"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+      style="width: 100%">
+      <el-table-column
+        type="index"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        property="date"
+        label="日期"
+        width="120">
+      </el-table-column>
+      <el-table-column
+        property="name"
+        label="姓名"
+        width="120">
+      </el-table-column>
+      <el-table-column
+        property="address"
+        label="地址">
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 20px">
+      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
+      <el-button @click="setCurrent()">取消选择</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '单选',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+      currentRow: null
+    }
+  },
+  methods: {
+    setCurrent (row) {
+      this.$refs.singleTable.setCurrentRow(row)
+    },
+    handleCurrentChange (val) {
+      this.currentRow = val
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table11/index.vue b/src/pages/demo/element/data-table/components/table11/index.vue
new file mode 100644
index 00000000..478ab38e
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table11/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <el-table
+      ref="multipleTable"
+      :data="tableData3"
+      tooltip-effect="dark"
+      style="width: 100%"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        label="日期"
+        width="120">
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="120">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="地址"
+        show-overflow-tooltip>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 20px">
+      <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
+      <el-button @click="toggleSelection()">取消选择</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '多选',
+  data () {
+    return {
+      tableData3: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      multipleSelection: []
+    }
+  },
+  methods: {
+    toggleSelection (rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row)
+        })
+      } else {
+        this.$refs.multipleTable.clearSelection()
+      }
+    },
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table12/index.vue b/src/pages/demo/element/data-table/components/table12/index.vue
new file mode 100644
index 00000000..6a3430dc
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table12/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    :default-sort = "{prop: 'date', order: 'descending'}"
+    >
+    <el-table-column
+      prop="date"
+      label="日期"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      :formatter="formatter">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '排序',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  methods: {
+    formatter (row, column) {
+      return row.address
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table13/index.vue b/src/pages/demo/element/data-table/components/table13/index.vue
new file mode 100644
index 00000000..79557c90
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table13/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      sortable
+      width="180"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      :formatter="formatter">
+    </el-table-column>
+    <el-table-column
+      prop="tag"
+      label="标签"
+      width="100"
+      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
+      :filter-method="filterTag"
+      filter-placement="bottom-end">
+      <template slot-scope="scope">
+        <el-tag
+          :type="scope.row.tag === '家' ? 'primary' : 'success'"
+          disable-transitions>{{scope.row.tag}}</el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '筛选',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        tag: '家'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄',
+        tag: '公司'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄',
+        tag: '家'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄',
+        tag: '公司'
+      }]
+    }
+  },
+  methods: {
+    formatter (row, column) {
+      return row.address
+    },
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table14/index.vue b/src/pages/demo/element/data-table/components/table14/index.vue
new file mode 100644
index 00000000..2dfc6b24
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table14/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      label="日期"
+      width="180">
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="姓名"
+      width="180">
+      <template slot-scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>姓名: {{ scope.row.name }}</p>
+          <p>住址: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '自定义列模板',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  methods: {
+    handleEdit (index, row) {
+      console.log(index, row)
+    },
+    handleDelete (index, row) {
+      console.log(index, row)
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table15/index.vue b/src/pages/demo/element/data-table/components/table15/index.vue
new file mode 100644
index 00000000..eb824784
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table15/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-table
+    :data="tableData5"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template slot-scope="props">
+        <el-form label-position="left" inline class="demo-table-expand">
+          <el-form-item label="商品名称">
+            <span>{{ props.row.name }}</span>
+          </el-form-item>
+          <el-form-item label="所属店铺">
+            <span>{{ props.row.shop }}</span>
+          </el-form-item>
+          <el-form-item label="商品 ID">
+            <span>{{ props.row.id }}</span>
+          </el-form-item>
+          <el-form-item label="店铺 ID">
+            <span>{{ props.row.shopId }}</span>
+          </el-form-item>
+          <el-form-item label="商品分类">
+            <span>{{ props.row.category }}</span>
+          </el-form-item>
+          <el-form-item label="店铺地址">
+            <span>{{ props.row.address }}</span>
+          </el-form-item>
+          <el-form-item label="商品描述">
+            <span>{{ props.row.desc }}</span>
+          </el-form-item>
+        </el-form>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="商品 ID"
+      prop="id">
+    </el-table-column>
+    <el-table-column
+      label="商品名称"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      label="描述"
+      prop="desc">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '展开行',
+  data () {
+    return {
+      tableData5: [{
+        id: '12987122',
+        name: '好滋好味鸡蛋仔',
+        category: '江浙小吃、小吃零食',
+        desc: '荷兰优质淡奶，奶香浓而不腻',
+        address: '上海市普陀区真北路',
+        shop: '王小虎夫妻店',
+        shopId: '10333'
+      }, {
+        id: '12987123',
+        name: '好滋好味鸡蛋仔',
+        category: '江浙小吃、小吃零食',
+        desc: '荷兰优质淡奶，奶香浓而不腻',
+        address: '上海市普陀区真北路',
+        shop: '王小虎夫妻店',
+        shopId: '10333'
+      }, {
+        id: '12987125',
+        name: '好滋好味鸡蛋仔',
+        category: '江浙小吃、小吃零食',
+        desc: '荷兰优质淡奶，奶香浓而不腻',
+        address: '上海市普陀区真北路',
+        shop: '王小虎夫妻店',
+        shopId: '10333'
+      }, {
+        id: '12987126',
+        name: '好滋好味鸡蛋仔',
+        category: '江浙小吃、小吃零食',
+        desc: '荷兰优质淡奶，奶香浓而不腻',
+        address: '上海市普陀区真北路',
+        shop: '王小虎夫妻店',
+        shopId: '10333'
+      }]
+    }
+  }
+}
+</script>
+
+<style>
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 50%;
+}
+</style>
diff --git a/src/pages/demo/element/data-table/components/table16/index.vue b/src/pages/demo/element/data-table/components/table16/index.vue
new file mode 100644
index 00000000..d02f904e
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table16/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      border
+      show-summary
+      style="width: 100%;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="数值 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="数值 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="数值 3">
+      </el-table-column>
+    </el-table>
+    <el-table
+      :data="tableData6"
+      border
+      height="200"
+      :summary-method="getSummaries"
+      show-summary
+      style="width: 100%; margin-top: 20px;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="数值 1（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="数值 2（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="数值 3（元）">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '表尾合计行',
+  data () {
+    return {
+      tableData6: [{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }]
+    }
+  },
+  methods: {
+    getSummaries (param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
+      return sums
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table17/index.vue b/src/pages/demo/element/data-table/components/table17/index.vue
new file mode 100644
index 00000000..9042af9a
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table17/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="数值 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="数值 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="数值 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="数值 1（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="数值 2（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="数值 3（元）">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '合并行或列',
+  data () {
+    return {
+      tableData6: [{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }]
+    }
+  },
+  methods: {
+    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex % 2 === 0) {
+        if (columnIndex === 0) {
+          return [1, 2]
+        } else if (columnIndex === 1) {
+          return [0, 0]
+        }
+      }
+    },
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        if (rowIndex % 2 === 0) {
+          return {
+            rowspan: 2,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table18/index.vue b/src/pages/demo/element/data-table/components/table18/index.vue
new file mode 100644
index 00000000..41f7c4b5
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table18/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '自定义索引',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333,
+        tag: '家'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333,
+        tag: '公司'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333,
+        tag: '家'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333,
+        tag: '公司'
+      }]
+    }
+  },
+  methods: {
+    indexMethod (index) {
+      return index * 2
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table2/index.vue b/src/pages/demo/element/data-table/components/table2/index.vue
new file mode 100644
index 00000000..8bea5304
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table2/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-table
+    :data="tableData"
+    stripe
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '带斑马纹表格',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table3/index.vue b/src/pages/demo/element/data-table/components/table3/index.vue
new file mode 100644
index 00000000..fa202a85
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table3/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '带边框表格',
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table4/index.vue b/src/pages/demo/element/data-table/components/table4/index.vue
new file mode 100644
index 00000000..5e5c73a1
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table4/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-table
+    :data="tableData2"
+    style="width: 100%"
+    :row-class-name="tableRowClassName">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '带状态表格',
+  methods: {
+    tableRowClassName ({row, rowIndex}) {
+      if (rowIndex === 1) {
+        return 'warning-row'
+      } else if (rowIndex === 3) {
+        return 'success-row'
+      }
+      return ''
+    }
+  },
+  data () {
+    return {
+      tableData2: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }]
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>
diff --git a/src/pages/demo/element/data-table/components/table5/index.vue b/src/pages/demo/element/data-table/components/table5/index.vue
new file mode 100644
index 00000000..0383fbf1
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table5/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-table
+    :data="tableData3"
+    height="250"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '固定表头',
+  data () {
+    return {
+      tableData3: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table6/index.vue b/src/pages/demo/element/data-table/components/table6/index.vue
new file mode 100644
index 00000000..9a8ed428
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table6/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      fixed
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="省份"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="市区"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="邮编"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="操作"
+      width="100">
+      <template slot-scope="scope">
+        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+        <el-button type="text" size="small">编辑</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '固定列',
+  methods: {
+    handleClick (row) {
+      console.log(row)
+    }
+  },
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table7/index.vue b/src/pages/demo/element/data-table/components/table7/index.vue
new file mode 100644
index 00000000..fea3657d
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table7/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%"
+    height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="省份"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="市区"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="邮编"
+      width="120">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '固定列和表头',
+  data () {
+    return {
+      tableData3: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table8/index.vue b/src/pages/demo/element/data-table/components/table8/index.vue
new file mode 100644
index 00000000..d958e009
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table8/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-table
+    :data="tableData4"
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="province"
+      label="省份"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="市区"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="邮编"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="操作"
+      width="120">
+      <template slot-scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          type="text"
+          size="small">
+          移除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '流体高度',
+  methods: {
+    deleteRow (index, rows) {
+      rows.splice(index, 1)
+    }
+  },
+  data () {
+    return {
+      tableData4: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/components/table9/index.vue b/src/pages/demo/element/data-table/components/table9/index.vue
new file mode 100644
index 00000000..1a11a278
--- /dev/null
+++ b/src/pages/demo/element/data-table/components/table9/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="150">
+    </el-table-column>
+    <el-table-column label="配送信息">
+      <el-table-column
+        prop="name"
+        label="姓名"
+        width="120">
+      </el-table-column>
+      <el-table-column label="地址">
+        <el-table-column
+          prop="province"
+          label="省份"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="city"
+          label="市区"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          width="300">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          label="邮编"
+          width="120">
+        </el-table-column>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  title: '多级表头',
+  data () {
+    return {
+      tableData3: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }]
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/element/data-table/index.vue b/src/pages/demo/element/data-table/index.vue
index 9ea11691..e41ec8ef 100644
--- a/src/pages/demo/element/data-table/index.vue
+++ b/src/pages/demo/element/data-table/index.vue
@@ -2,56 +2,35 @@
   <d2-container type="ghost">
     <template slot="header">表格组件</template>
     <div class="d2-mt d2-mr">
-
-      <el-card shadow="never" class="d2-card">
-        <template slot="header">基础用法</template>
-        <el-table
-          :data="tableData"
-          style="width: 100%">
-          <el-table-column
-            prop="date"
-            label="日期"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="姓名"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="address"
-            label="地址">
-          </el-table-column>
-        </el-table>
+      <el-card
+        v-for="(table, index) in tableList"
+        :key="index"
+        shadow="never"
+        class="d2-card d2-mb">
+        <template slot="header">{{table.title}}</template>
+        <component :is="table.component"/>
       </el-card>
-
     </div>
   </d2-container>
 </template>
 
 <script>
+const req = context => context.keys().map(context)
+const tables = req(require.context('./components', true, /\.vue$/))
+const components = {}
+const tableList = []
+tables.forEach((table, index) => {
+  components[`d2-demo-el-table-${index + 1}`] = table.default
+  tableList.push({
+    title: table.default.title,
+    component: `d2-demo-el-table-${index + 1}`
+  })
+})
 export default {
+  components,
   data () {
     return {
-      tableData: [
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }
-      ]
+      tableList
     }
   }
 }