From e894a1c59de7360d27463f8882293c0a3ef9e26e Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 4 Mar 2019 18:13:03 +0800
Subject: [PATCH] refine

---
 src/components/TreeTable/eval.js              |  6 +-
 src/components/TreeTable/index.vue            | 84 +++++++------------
 src/views/table/treeTable/customTreeTable.vue |  2 +-
 src/views/table/treeTable/treeTable.vue       | 41 ++++-----
 4 files changed, 55 insertions(+), 78 deletions(-)

diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js
index 3f523867..b58b30cc 100644
--- a/src/components/TreeTable/eval.js
+++ b/src/components/TreeTable/eval.js
@@ -1,15 +1,13 @@
 import Vue from 'vue'
 
 // 扁平化数组
-export default function treeToTable(
-  data, children = 'children'
-) {
+export default function treeToArray(data, children = 'children') {
   let tmp = []
   data.forEach((item, idx) => {
     Vue.set(item, '__index', idx)
     tmp.push(item)
     if (item[children] && item[children].length > 0) {
-      const res = treeToTable(item[children], children)
+      const res = treeToArray(item[children], children)
       tmp = tmp.concat(res)
     }
   })
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 8683cb78..495f288a 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,50 +1,34 @@
 <template>
-  <el-table :data="res" :row-style="isShowRow" v-bind="$attrs">
-    <!--通过插槽支持element-ui原生的表格复选框 http://element-cn.eleme.io/#/zh-CN/component/table#duo-xuan -->
-    <slot name="__selection"/>
-    <!--通过插槽支持element-ui原生的表格展开行 http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing -->
-    <slot name="__expand"/>
+  <el-table :data="tableData" :row-style="showRow" v-bind="$attrs">
+    <slot name="selection" />
     <el-table-column
       v-for="item in columns"
       :label="item.label"
       :key="item.key"
       :width="item.width"
-      align="center"
-    >
+      :align="item.align||'center'"
+      :header-align="item.headerAlign">
       <template slot-scope="scope">
         <slot :scope="scope" :name="item.key">
-          <template v-if="item.key==='__sperad'">
-            <span
-              v-show="isShowSperadIcon(scope.row)"
-              class="tree-ctrl"
-              @click="toggleExpanded(scope.$index)"
-            >
-              <i
-                v-if="!scope.row.__expand"
-                :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
-                class="el-icon-plus"
-              />
-              <i
-                v-else
-                :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "
-                class="el-icon-minus"
-              />
+          <template v-if="item.expand">
+            <span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/>
+            <span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
+              <i v-if="!scope.row.__expand" class="el-icon-plus" />
+              <i v-else class="el-icon-minus" />
             </span>
           </template>
-          <template v-if="item.key==='__checkbox'">
+          <template v-if="item.checkbox">
             <el-checkbox
               v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
               :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
               :indeterminate="scope.row.__select"
               v-model="scope.row.__select"
-              @change="handleCheckAllChange(scope.row)"
-            />
+              @change="handleCheckAllChange(scope.row)" />
             <el-checkbox
               v-else
               :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
               v-model="scope.row.__select"
-              @change="handleCheckAllChange(scope.row)"
-            />
+              @change="handleCheckAllChange(scope.row)" />
           </template>
           {{ scope.row[item.key] }}
         </slot>
@@ -60,17 +44,14 @@ export default {
   name: 'TreeTable',
   props: {
     data: {
-      type: [Array, Object],
-      required: true
+      type: Array,
+      required: true,
+      default: () => []
     },
     columns: {
       type: Array,
       default: () => []
     },
-    /* eslint-disable */
-    renderContent: {
-      type: Function
-    },
     /* eslint-enable */
     defaultExpandAll: {
       type: Boolean,
@@ -91,7 +72,7 @@ export default {
   },
   data() {
     return {
-      res: [],
+      tableData: [],
       guard: 1
     }
   },
@@ -104,46 +85,40 @@ export default {
     data: {
       // deep watch，监听树表的数据的增删，如果仅仅是展示，可以不用deep watch
       handler(val) {
-        if (Array.isArray(val) && val.length === 0) {
-          this.res = []
+        if (val.length === 0) {
+          this.tableData = []
           return
         }
-        let tmp = ''
-        if (!Array.isArray(val)) {
-          tmp = [val]
-        } else {
-          tmp = val
-        }
-        const func = this.renderContent || treeToArray
+
         if (this.guard > 0) {
-          addAttrs(tmp, {
+          addAttrs(val, {
             expand: this.defaultExpandAll,
             children: this.defaultChildren
           })
           this.guard--
         }
 
-        const retval = func(tmp, this.defaultChildren)
-        this.res = retval
+        const retval = treeToArray(val, this.defaultChildren)
+        this.tableData = retval
       },
       deep: true,
       immediate: true
     }
   },
   methods: {
-    isShowRow: function(row) {
-      const parent = row.row.__parent
+    showRow: function({ row }) {
+      const parent = row.__parent
       const show = parent ? parent.__expand && parent.__show : true
-      row.row.__show = show
+      row.__show = show
       return show
         ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
         : 'display:none;'
     },
-    isShowSperadIcon(record) {
+    showSperadIcon(record) {
       return record[this.children] && record[this.children].length > 0
     },
     toggleExpanded(trIndex) {
-      const record = this.res[trIndex]
+      const record = this.tableData[trIndex]
       const expand = !record.__expand
       record.__expand = expand
     },
@@ -168,7 +143,7 @@ export default {
 }
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style>
 @keyframes treeTableShow {
   from {
     opacity: 0;
@@ -185,6 +160,9 @@ export default {
     opacity: 1;
   }
 }
+</style>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
 $color-blue: #2196f3;
 $space-width: 18px;
 .ms-tree-space {
diff --git a/src/views/table/treeTable/customTreeTable.vue b/src/views/table/treeTable/customTreeTable.vue
index 81557216..361082db 100644
--- a/src/views/table/treeTable/customTreeTable.vue
+++ b/src/views/table/treeTable/customTreeTable.vue
@@ -14,7 +14,7 @@
         border
         default-children="sub_button"
       >
-        <template slot="__selection">
+        <template slot="selection">
           <el-table-column type="selection" width="55"/>
         </template>
         <template slot="__expand">
diff --git a/src/views/table/treeTable/treeTable.vue b/src/views/table/treeTable/treeTable.vue
index 64d6ac04..412cb07a 100644
--- a/src/views/table/treeTable/treeTable.vue
+++ b/src/views/table/treeTable/treeTable.vue
@@ -20,19 +20,20 @@ export default {
   data() {
     return {
       columns: [
+        {
+          label: 'Checkbox',
+          checkbox: true
+        },
         {
           label: '',
-          key: '__sperad'
-
+          key: 'id',
+          expand: true
         },
         {
-          label: '事件',
+          label: 'Event',
           key: 'event',
-          width: 200
-        },
-        {
-          label: 'ID',
-          key: 'id'
+          width: 200,
+          align: 'left'
         },
         {
           label: '时间线',
@@ -46,67 +47,67 @@ export default {
       data: [
         {
           id: 0,
-          event: '事件1',
+          event: 'Event-0',
           timeLine: 50,
           comment: '无'
         },
         {
           id: 1,
-          event: '事件1',
+          event: 'Event-1',
           timeLine: 100,
           comment: '无',
           children: [
             {
               id: 2,
-              event: '事件2',
+              event: 'Event-2',
               timeLine: 10,
               comment: '无'
             },
             {
               id: 3,
-              event: '事件3',
+              event: 'Event-3',
               timeLine: 90,
               comment: '无',
               children: [
                 {
                   id: 4,
-                  event: '事件4',
+                  event: 'Event-4',
                   timeLine: 5,
                   comment: '无'
                 },
                 {
                   id: 5,
-                  event: '事件5',
+                  event: 'Event-5',
                   timeLine: 10,
                   comment: '无'
                 },
                 {
                   id: 6,
-                  event: '事件6',
+                  event: 'Event-6',
                   timeLine: 75,
                   comment: '无',
                   children: [
                     {
                       id: 7,
-                      event: '事件7',
+                      event: 'Event-7',
                       timeLine: 50,
                       comment: '无',
                       children: [
                         {
                           id: 71,
-                          event: '事件71',
+                          event: 'Event-7-1',
                           timeLine: 25,
                           comment: 'xx'
                         },
                         {
                           id: 72,
-                          event: '事件72',
+                          event: 'Event-7-2',
                           timeLine: 5,
                           comment: 'xx'
                         },
                         {
                           id: 73,
-                          event: '事件73',
+                          event: 'Event-7-3',
                           timeLine: 20,
                           comment: 'xx'
                         }
@@ -114,7 +115,7 @@ export default {
                     },
                     {
                       id: 8,
-                      event: '事件8',
+                      event: 'Event-8',
                       timeLine: 25,
                       comment: '无'
                     }