update

src/components/TreeTable/eval.js

@@ -1,10 +1,10 @@
 import Vue from 'vue'
 
-// 扁平化数组
+// Flattened array
 export default function treeToArray(data, children = 'children') {
   let tmp = []
   data.forEach((item, idx) => {
-    Vue.set(item, '__index', idx)
+    Vue.set(item, '_index', idx)
     tmp.push(item)
     if (item[children] && item[children].length > 0) {
       const res = treeToArray(item[children], children)
@@ -14,15 +14,13 @@ export default function treeToArray(data, children = 'children') {
   return tmp
 }
 
-// 给数据添加额外的几个属性
-// 清除__parent属性，因数据循环引用，使用JSON.stringify()报错
 export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
-  data.forEach((item, idx) => {
+  data.forEach(item => {
-    Vue.set(item, '__level', level)
+    Vue.set(item, '_level', level)
-    Vue.set(item, '__expand', expand)
+    Vue.set(item, '_expand', expand)
-    Vue.set(item, '__parent', parent)
+    Vue.set(item, '_parent', parent)
-    Vue.set(item, '__show', show)
+    Vue.set(item, '_show', show)
-    Vue.set(item, '__select', select)
+    Vue.set(item, '_select', select)
     if (item[children] && item[children].length > 0) {
       addAttrs(item[children], {
         parent: item,
@@ -36,14 +34,12 @@ export function addAttrs(data, { parent = null, level = 0, expand = false, child
   })
 }
 
-// 清除__parent属性
 export function cleanAttrs(data, children = 'children') {
   data.forEach(item => {
-    item.__parent = null
+    item._parent = null
     if (item[children] && item[children].length > 0) {
       addAttrs(item[children], children)
     }
   })
   return data
 }
-

src/components/TreeTable/index.vue

@@ -11,23 +11,23 @@
       <template slot-scope="scope">
         <slot :scope="scope" :name="item.key">
           <template v-if="item.expand">
-            <span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/>
+            <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-if="!scope.row._expand" class="el-icon-plus" />
               <i v-else class="el-icon-minus" />
             </span>
           </template>
           <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'} "
+              :style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
-              :indeterminate="scope.row.__select"
+              :indeterminate="scope.row._select"
-              v-model="scope.row.__select"
+              v-model="scope.row._select"
               @change="handleCheckAllChange(scope.row)" />
             <el-checkbox
               v-else
-              :style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
+              :style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
-              v-model="scope.row.__select"
+              v-model="scope.row._select"
               @change="handleCheckAllChange(scope.row)" />
           </template>
           {{ scope.row[item.key] }}
@@ -89,7 +89,7 @@ export default {
           this.tableData = []
           return
         }
-
+        console.log('render')
         if (this.guard > 0) {
           addAttrs(val, {
             expand: this.defaultExpandAll,
@@ -101,15 +101,15 @@ export default {
         const retval = treeToArray(val, this.defaultChildren)
         this.tableData = retval
       },
-      deep: true,
+      // deep: true,
       immediate: true
     }
   },
   methods: {
     showRow: function({ row }) {
-      const parent = row.__parent
+      const parent = row._parent
-      const show = parent ? parent.__expand && parent.__show : true
+      const show = parent ? parent._expand && parent._show : true
-      row.__show = show
+      row._show = show
       return show
         ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
         : 'display:none;'
@@ -119,22 +119,22 @@ export default {
     },
     toggleExpanded(trIndex) {
       const record = this.tableData[trIndex]
-      const expand = !record.__expand
+      const expand = !record._expand
-      record.__expand = expand
+      record._expand = expand
     },
     handleCheckAllChange(row) {
-      this.selcetRecursion(row, row.__select, this.defaultChildren)
+      this.selcetRecursion(row, row._select, this.defaultChildren)
-      this.isIndeterminate = row.__select
+      this.isIndeterminate = row._select
     },
     selcetRecursion(row, select, children = 'children') {
       if (select) {
-        this.$set(row, '__expand', true)
+        this.$set(row, '_expand', true)
-        this.$set(row, '__show', true)
+        this.$set(row, '_show', true)
       }
       const sub_item = row[children]
       if (sub_item && sub_item.length > 0) {
         sub_item.map(child => {
-          child.__select = select
+          child._select = select
           this.selcetRecursion(child, select, children)
         })
       }
@@ -164,20 +164,6 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
 $color-blue: #2196f3;
-$space-width: 18px;
-.ms-tree-space {
-  position: relative;
-  top: 1px;
-  display: inline-block;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1;
-  width: $space-width;
-  height: 14px;
-  &::before {
-    content: "";
-  }
-}
 
 .tree-ctrl {
   position: relative;

src/views/table/treeTable/treeTable.vue

@@ -1,11 +1,42 @@
 <template>
   <div class="app-container">
 
-    <el-tag style="margin-bottom:20px;">
+    <div 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/>
+      <el-button type="primary" class="option-item">
+        <a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
+      </el-button>
+
+      <div class="option-item">
+        <el-tag>默认展开所有</el-tag>
+        <el-switch
+          v-model="defaultExpandAll"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          @change="reset"/>
+      </div>
+
+      <div class="option-item">
+        <el-tag>显示Checkbox</el-tag>
+        <el-switch
+          v-model="showCheckbox"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+        />
+      </div>
+
+    </div>
+
+    <tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
+      <template slot="scope" slot-scope="{scope}">
+        <el-tag>level: {{ scope.row._level }}</el-tag>
+        <el-tag>expand: {{ scope.row._expand }}</el-tag>
+        <el-tag>select: {{ scope.row._select }}</el-tag>
+      </template>
+      <template slot="operation" slot-scope="{scope}">
+        <el-button type="primary" size="" @click="click(scope)">Click</el-button>
+      </template>
+    </tree-table>
 
   </div>
 </template>
@@ -19,6 +50,9 @@ export default {
   components: { treeTable },
   data() {
     return {
+      defaultExpandAll: false,
+      showCheckbox: true,
+      key: 1,
       columns: [
         {
           label: 'Checkbox',
@@ -36,88 +70,83 @@ export default {
           align: 'left'
         },
         {
-          label: '时间线',
+          label: 'Scope',
-          key: 'timeLine'
+          key: 'scope'
         },
         {
-          label: '备注',
+          label: 'Operation',
-          key: 'comment'
+          key: 'operation'
         }
       ],
       data: [
         {
           id: 0,
           event: 'Event-0',
-          timeLine: 50,
+          timeLine: 50
-          comment: '无'
         },
         {
           id: 1,
           event: 'Event-1',
           timeLine: 100,
-          comment: '无',
           children: [
             {
               id: 2,
               event: 'Event-2',
-              timeLine: 10,
+              timeLine: 10
-              comment: '无'
+
             },
             {
               id: 3,
               event: 'Event-3',
               timeLine: 90,
-              comment: '无',
               children: [
                 {
                   id: 4,
                   event: 'Event-4',
-                  timeLine: 5,
+                  timeLine: 5
-                  comment: '无'
+
                 },
                 {
                   id: 5,
                   event: 'Event-5',
-                  timeLine: 10,
+                  timeLine: 10
-                  comment: '无'
+
                 },
                 {
                   id: 6,
                   event: 'Event-6',
                   timeLine: 75,
-                  comment: '无',
+
                   children: [
                     {
                       id: 7,
                       event: 'Event-7',
                       timeLine: 50,
-                      comment: '无',
+
                       children: [
                         {
                           id: 71,
                           event: 'Event-7-1',
-                          timeLine: 25,
+                          timeLine: 25
-                          comment: 'xx'
+
                         },
                         {
                           id: 72,
                           event: 'Event-7-2',
-                          timeLine: 5,
+                          timeLine: 5
-                          comment: 'xx'
+
                         },
                         {
                           id: 73,
                           event: 'Event-7-3',
-                          timeLine: 20,
+                          timeLine: 20
-                          comment: 'xx'
                         }
                       ]
                     },
                     {
                       id: 8,
                       event: 'Event-8',
-                      timeLine: 25,
+                      timeLine: 25
-                      comment: '无'
                     }
                   ]
                 }
@@ -127,6 +156,34 @@ export default {
         }
       ]
     }
+  },
+  watch: {
+    showCheckbox(val) {
+      if (val) {
+        this.columns.unshift({
+          label: 'Checkbox',
+          checkbox: true
+        })
+      } else {
+        this.columns.shift()
+      }
+      this.reset()
+    }
+  },
+  methods: {
+    reset() {
+      ++this.key
+    },
+    click(scope) {
+      console.log(scope)
+    }
   }
 }
 </script>
+
+<style scoped>
+.option-item{
+  display: inline-block;
+  margin-right: 15px;
+}
+</style>