From 0d47e3454e9c7df581f1ad6f94686be12fe68993 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 23 Jan 2018 15:12:17 +0800
Subject: [PATCH] perf[treeTable]

---
 README.md                                     |  1 +
 README.zh-CN.md                               |  1 +
 src/components/TreeTable/index.vue            |  2 +-
 src/components/TreeTable/readme.md            |  6 +--
 src/lang/zh.js                                |  2 +-
 .../table/treeTable/customTreeTable.vue       | 53 +++++++++++--------
 .../example/table/treeTable/treeTable.vue     | 10 +++-
 7 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 94768901..8ac89d14 100644
--- a/README.md
+++ b/README.md
@@ -78,6 +78,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
 - Export excel
 - Export zip
 - Front-end visualization excel
+- Tree Table
 - Table example
 - Dynamictable example
 - Drag and drop table example
diff --git a/README.zh-CN.md b/README.zh-CN.md
index ead8d63c..9a5cfc80 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -91,6 +91,7 @@
 - 导出excel
 - 导出zip
 - 前端可视化excel
+- 树形table
 - Table example
 - 动态table example
 - 拖拽table example
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 0f7e51b0..6146c76a 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="formatData" :row-style="showRow">
+  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
     <el-table-column v-if="columns.length===0" width="150">
       <template slot-scope="scope">
         <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md
index 09bd2c12..2efa9b77 100644
--- a/src/components/TreeTable/readme.md
+++ b/src/components/TreeTable/readme.md
@@ -1,8 +1,8 @@
 ## 写在前面
 此组件仅提供一个创建TreeTable的解决方案
 
-##prop说明
-###data
+## prop说明
+### data
   **必填**
 
   原始数据,要求是一个数组或者对象
@@ -35,7 +35,7 @@
     }
   ```
 
-###columns
+### columns
   列属性,要求是一个数组
 
   1. text: 显示在表头
diff --git a/src/lang/zh.js b/src/lang/zh.js
index c465cfee..08741687 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -28,7 +28,7 @@ export default {
     dragTable: '拖拽table',
     inlineEditTable: 'table内编辑',
     complexTable: '综合table',
-    treeTable: '树表',
+    treeTable: '树形表格',
     customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',
diff --git a/src/views/example/table/treeTable/customTreeTable.vue b/src/views/example/table/treeTable/customTreeTable.vue
index 22081df6..773b7fdd 100644
--- a/src/views/example/table/treeTable/customTreeTable.vue
+++ b/src/views/example/table/treeTable/customTreeTable.vue
@@ -1,30 +1,37 @@
 <template>
-  <tree-table :data="data" :evalFunc="func" :evalArgs="args">
-    <el-table-column label="事件">
-      <template slot-scope="scope">
-        <span style="color:sandybrown">{{scope.row.event}}</span>
-        <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
-      </template>
-    </el-table-column>
-    <el-table-column label="时间线">
-      <template slot-scope="scope">
-        <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
-          <div class="processContainer">
-            <div class="process" :style="{ width:scope.row._width * 500+'px',
+  <div class="app-container">
+
+    <el-tag style="margin-bottom:20px;">
+      <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
+    </el-tag>
+
+    <tree-table :data="data" :evalFunc="func" :evalArgs="args" border>
+      <el-table-column label="事件">
+        <template slot-scope="scope">
+          <span style="color:sandybrown">{{scope.row.event}}</span>
+          <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="时间线">
+        <template slot-scope="scope">
+          <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
+            <div class="processContainer">
+              <div class="process" :style="{ width:scope.row._width * 500+'px',
               background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
               marginLeft:scope.row._marginLeft * 500+'px' }">
-              <span style="display:inline-block"></span>
+                <span style="display:inline-block"></span>
+              </div>
             </div>
-          </div>
-        </el-tooltip>
-      </template>
-    </el-table-column>
-    <el-table-column label="操作" width="200">
-      <template slot-scope="scope">
-        <el-button type="text" @click="message(scope.row)">点击</el-button>
-      </template>
-    </el-table-column>
-  </tree-table>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template slot-scope="scope">
+          <el-button type="text" @click="message(scope.row)">点击</el-button>
+        </template>
+      </el-table-column>
+    </tree-table>
+  </div>
 </template>
 
 <script>
diff --git a/src/views/example/table/treeTable/treeTable.vue b/src/views/example/table/treeTable/treeTable.vue
index 90fa9342..b61e2f0c 100644
--- a/src/views/example/table/treeTable/treeTable.vue
+++ b/src/views/example/table/treeTable/treeTable.vue
@@ -1,5 +1,13 @@
 <template>
-  <tree-table :data="data" :columns="columns"></tree-table>
+  <div class="app-container">
+
+    <el-tag style="margin-bottom:20px;">
+      <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
+    </el-tag>
+
+    <tree-table :data="data" :columns="columns" border></tree-table>
+
+  </div>
 </template>
 
 <script>