修复bug

src/components/TreeTable/index.vue

@@ -1,12 +1,23 @@
 <template>
-    <el-table :data="formatData"
+    <el-table :data="formatData" :row-style="showRow">
-      :row-style="showRow">
+      <el-table-column v-if="columns.length===0" width="150">
-      <el-table-column v-for="(column, index) in columns" :key="column.value"
+        <template slot-scope="scope">
+          <span v-for="space in scope.row._level"
+                class="ms-tree-space"></span>
+          <span class="tree-ctrl" v-if="iconShow(0,scope.row)"
+                @click="toggleExpanded(scope.$index)">
+            <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
+            <i v-else class="el-icon-minus"></i>
+          </span>
+          {{scope.$index}}
+        </template>
+      </el-table-column>
+      <el-table-column v-else v-for="(column, index) in columns" :key="column.value"
        :label="column.text" :width="column.width">
         <template slot-scope="scope">
           <span v-if="index === 0" v-for="space in scope.row._level"
                 class="ms-tree-space"></span>
-          <span class="tree-ctrl" v-if="toggleIconShow(index,scope.row)"
+          <span class="tree-ctrl" v-if="iconShow(index,scope.row)"
                   @click="toggleExpanded(scope.$index)">
             <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
             <i v-else class="el-icon-minus"></i>
@@ -14,66 +25,65 @@
           {{scope.row[column.value]}}
         </template>
       </el-table-column>
-      <slot name="extend"></slot>
+      <slot></slot>
     </el-table>
 </template>
 
 <script>
-  /**
-   * 传进来的数据格式
-   * columns：{
-   * [value:'',text:'']
-   * }
 	/**
 	 Auth: Lei.j1ang
 	 Created: 2018/1/19-13:59
 	 */
-  import treeToArray from './eval'
+import treeToArray from './eval'
 export default {
-    name: 'tree-table',
+  name: 'treeTable',
-    props: {
+  props: {
-      data: {
+    a: 1,
-        type: [Array, Object],
+    data: {
-        required: true
+      type: [Array, Object],
-      },
+      required: true
-      columns: {
-        type: Array,
-        required: true
-      },
-      evalFunc: Function,
-      evalArgs: Array,
-      expandAll: {
-        type: Boolean,
-        default: false
-      }
     },
-    computed: {
+    columns: {
-      // 格式化数据源
+      type: Array,
-      formatData: function() {
+      default: () => []
-        if (!Array.isArray(this.data)) {
-          this.data = [this.data]
-        }
-        const func = this.evalFunc || treeToArray
-        const args = this.evalArgs ? Array.concat([this.data], this.evalArgs) : [this.data, this.expandAll]
-        return func.apply(null, args)
-      }
     },
-    methods: {
+    evalFunc: Function,
-      showRow: function(row) {
+    evalArgs: Array,
-        const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
+    expandAll: {
-        row.row._show = show
+      type: Boolean,
-        return show ? '' : 'display:none;'
+      default: false
-      },
-      // 切换下级是否展开
-      toggleExpanded: function(trIndex) {
-        const record = this.formatData[trIndex]
-        record._expanded = !record._expanded
-      },
-      // 图标显示
-      toggleIconShow(index, record) {
-        return (index === 0 && record.children && record.children.length > 0)
-      }
     }
+  },
+  computed: {
+    // 格式化数据源
+    formatData: function() {
+      let tmp
+      if (!Array.isArray(this.data)) {
+        tmp = [this.data]
+      } else {
+        tmp = this.data
+      }
+      const func = this.evalFunc || treeToArray
+      const args = this.evalArgs ? Array.concat([tmp], this.evalArgs) : [tmp, this.expandAll]
+      return func.apply(null, args)
+    }
+  },
+  methods: {
+    showRow: function(row) {
+      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
+      row.row._show = show
+      return show ? '' : 'display:none;'
+    },
+    // 切换下级是否展开
+    toggleExpanded: function(trIndex) {
+      const record = this.formatData[trIndex]
+      record._expanded = !record._expanded
+    },
+    // 图标显示
+    iconShow(index, record) {
+      return (index === 0 && record.children && record.children.length > 0)
+    }
+  }
 }
 </script>
 

src/components/TreeTable/readme.md

@@ -1,3 +1,5 @@
+## 写在前面
+此组件仅提供一个创建TreeTable的解决方案
 ##prop说明
 ###data 
   必输
@@ -28,14 +30,14 @@
       }]
     }
   ```
-###columns
-  必输
   
+###columns
   列属性,要求是一个数组
   
   1. text: 显示在表头
   2. value: 对应data的key，treeTable将显示相应的value
   3. width: 每列的宽度，为一个数字
+  如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
   ```javascript
   [{
     value:string,
@@ -47,8 +49,10 @@
     width:number
   }]
   ```
+  
 ### expandAll
   是否默认全部展开，boolean值，默认为false
+
 ### evalFunc
   解析函数，function，非必须
   
@@ -63,4 +67,7 @@
   
   如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
  ## slot
- 请参考`customTreeTable`
+ 请参考`customTreeTable`
+ 
+ ## 其他
+  如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

src/views/example/table/treeTable/customEval.js

@@ -4,14 +4,10 @@
 */
 'use strict'
 import Vue from 'vue'
-const marLTemp = {}
+const marLTemp = []
 export default function treeToArray(data, parent, level, expandedAll, item) {
   let tmp = []
-  let rootId
   Array.from(data).forEach(function(record) {
-    if (record.children) {
-      rootId = record.id
-    }
     if (record._expanded === undefined) {
       Vue.set(record, '_expanded', expandedAll)
     }
@@ -25,16 +21,13 @@ export default function treeToArray(data, parent, level, expandedAll, item) {
       Vue.set(record, 'parent', parent)
       // 如果父元素有偏移量，需要计算在this的偏移量中
       // 偏移量还与前面同级元素有关，需要加上前面所有元素的长度和
-      if (!marLTemp[rootId]) {
+      if (!marLTemp[_level]) {
-        marLTemp[rootId] = []
+        marLTemp[_level] = 0
       }
-      if (!marLTemp[rootId][_level]) {
+      Vue.set(record, '_marginLeft', marLTemp[_level] + parent._marginLeft)
-        marLTemp[rootId][_level] = 0
-      }
-      Vue.set(record, '_marginLeft', marLTemp[rootId][_level] + parent._marginLeft)
       Vue.set(record, '_width', record[item] / parent[item] * parent._width)
       // 在本次计算过偏移量后加上自己长度，以供下一个元素使用
-      marLTemp[rootId][_level] += record._width
+      marLTemp[_level] += record._width
     } else {
       // 如果为根
       // 初始化偏移量存储map

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

@@ -1,7 +1,6 @@
 <template>
-    <tree-table :data="data" :columns="columns" :evalFunc="func" :evalArgs="args">
+    <tree-table :data="data" :evalFunc="func" :evalArgs="args">
-      <template slot="extend">
+        <el-table-column label="时间线">
-        <el-table-column label="时间线" width="500" >
           <template slot-scope="scope">
             <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
               <div class="processContainer">
@@ -19,7 +18,6 @@
             <el-button type="text" @click="message(scope.row)">点击</el-button>
           </template>
         </el-table-column>
-      </template>
     </tree-table>
 </template>
 
@@ -54,13 +52,7 @@ export default {
           value: 'comment'
         }
       ],
-      data: [
+      data:
-        {
-          id: 0,
-          event: '事件0',
-          timeLine: 50,
-          comment: '无'
-        },
         {
           id: 1,
           event: '事件1',
@@ -134,8 +126,7 @@ export default {
               ]
             }
           ]
-        }
+        },
-      ],
       args: [null, null, true, 'timeLine']
     }
   },