perf[treeTable]

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

README.zh-CN.md

@@ -91,6 +91,7 @@
 - 导出excel
 - 导出zip
 - 前端可视化excel
+- 树形table
 - Table example
 - 动态table example
 - 拖拽table example

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>

src/components/TreeTable/readme.md

@@ -1,8 +1,8 @@
 ## 写在前面
 此组件仅提供一个创建TreeTable的解决方案
 
-##prop说明
+## prop说明
-###data
+### data
   **必填**
 
   原始数据,要求是一个数组或者对象
@@ -35,7 +35,7 @@
     }
   ```
 
-###columns
+### columns
   列属性,要求是一个数组
 
   1. text: 显示在表头

src/lang/zh.js

@@ -28,7 +28,7 @@ export default {
     dragTable: '拖拽table',
     inlineEditTable: 'table内编辑',
     complexTable: '综合table',
-    treeTable: '树表',
+    treeTable: '树形表格',
     customTreeTable: '自定义树表',
     tab: 'Tab',
     form: '表单',

src/views/example/table/treeTable/customTreeTable.vue

@@ -1,30 +1,37 @@
 <template>
-  <tree-table :data="data" :evalFunc="func" :evalArgs="args">
+  <div class="app-container">
-    <el-table-column label="事件">
+
-      <template slot-scope="scope">
+    <el-tag style="margin-bottom:20px;">
-        <span style="color:sandybrown">{{scope.row.event}}</span>
+      <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
-        <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
+    </el-tag>
-      </template>
+
-    </el-table-column>
+    <tree-table :data="data" :evalFunc="func" :evalArgs="args" border>
-    <el-table-column label="时间线">
+      <el-table-column label="事件">
-      <template slot-scope="scope">
+        <template slot-scope="scope">
-        <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
+          <span style="color:sandybrown">{{scope.row.event}}</span>
-          <div class="processContainer">
+          <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
-            <div class="process" :style="{ width:scope.row._width * 500+'px',
+        </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>
-        </el-tooltip>
+        </template>
-      </template>
+      </el-table-column>
-    </el-table-column>
+      <el-table-column label="操作" width="200">
-    <el-table-column label="操作" width="200">
+        <template slot-scope="scope">
-      <template slot-scope="scope">
+          <el-button type="text" @click="message(scope.row)">点击</el-button>
-        <el-button type="text" @click="message(scope.row)">点击</el-button>
+        </template>
-      </template>
+      </el-table-column>
-    </el-table-column>
+    </tree-table>
-  </tree-table>
+  </div>
 </template>
 
 <script>

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>