update

src/views/table/treeTable/customTreeTable.vue

@@ -32,21 +32,27 @@
           </el-table-column>
         </template>
 
-        <!-- <template slot="name" slot-scope="{scope}">
-          <span :style="{'padding-left':+scope.row.__level*50 + 'px'} ">
-            <a
-              v-if="scope.row.type === 'view'"
-              :href="scope.row.url"
-              class="link-type"
-            >{{ scope.row.name }}</a>
-            <span v-else>{{ scope.row.name }}</span>
-          </span>
-        </template> -->
+        <template slot="timeline" slot-scope="{scope}">
+
+          <el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
+            <div class="processContainer">
+              <div
+                :style="{ width:(scope.row.timeLine||0) * 3+'px',
+                          background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
+                          marginLeft:scope.row._level * 50+'px' }"
+                class="process">
+                <span style="display:inline-block"/>
+              </div>
+            </div>
+          </el-tooltip>
+
+        </template>
+
         <template slot="append" slot-scope="{scope}">
           <el-button
             size="mini"
             type="primary"
-            @click="addMenuItem(scope.row,'brother',scope)"
+            @click="addMenuItem(scope.row,'brother')"
           >Append Brother
           </el-button>
           <el-button
@@ -97,25 +103,18 @@ export default {
           expand: true
         },
         {
-          label: 'type',
-          key: 'type'
-        },
-        {
-          label: 'appid',
-          key: 'appid'
-        },
-        {
-          label: 'key',
-          key: 'key'
+          label: 'Timeline',
+          key: 'timeline'
         },
         {
           label: 'Append',
-          key: 'append'
+          key: 'append',
+          width: 300
         },
         {
           label: 'Operation',
           key: 'operation',
-          width: '160px'
+          width: 160
         }
       ]
     }
@@ -146,7 +145,7 @@ export default {
       data.splice(index, 1, Object.assign({}, this.tempItem))
       this.dialogFormVisible = false
     },
-    addMenuItem(row, type, a) {
+    addMenuItem(row, type) {
       if (type === 'children') {
         this.$refs.TreeTable.addChild(row, { name: 'child' })
       }

src/views/table/treeTable/data.js

@@ -1,31 +1,49 @@
 export const data = [
   {
     name: '1',
+    timeLine: 100,
     children: [
       {
-        name: '1-1'
+        name: '1-1',
+        timeLine: 20
       },
       {
-        name: '1-2'
+        name: '1-2',
+        timeLine: 60,
+        children: [
+          {
+            name: '1-2-1',
+            timeLine: 35
+          },
+          {
+            name: '1-2-2',
+            timeLine: 25
+          }
+        ]
       }
     ]
   },
   {
     name: '2',
+    timeLine: 80,
     children: [
       {
-        name: '2-1'
+        name: '2-1',
+        timeLine: 30
       },
       {
-        name: '2-2'
+        name: '2-2',
+        timeLine: 50
       },
       {
-        name: '2-3'
+        name: '2-3',
+        timeLine: 60
       }
     ]
   },
   {
-    name: '3'
+    name: '3',
+    timeLine: 40
   }
 ]