diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js
new file mode 100644
index 00000000..ffbe98aa
--- /dev/null
+++ b/src/components/TreeTable/eval.js
@@ -0,0 +1,29 @@
+/**
+* @Author: jianglei
+* @Date: 2017-10-12 12:06:49
+*/
+'use strict'
+import Vue from 'vue'
+export default function treeToArray(data, expandedAll, parent, level) {
+ let tmp = []
+ Array.from(data).forEach(function(record) {
+ if (record._expanded === undefined) {
+ Vue.set(record, '_expanded', expandedAll)
+ }
+ let _level = 1
+ if (level !== undefined && level !== null) {
+ _level = level + 1
+ }
+ Vue.set(record, '_level', _level)
+ // 如果有父元素
+ if (parent) {
+ Vue.set(record, 'parent', parent)
+ }
+ tmp.push(record)
+ if (record.children && record.children.length > 0) {
+ const children = treeToArray(record.children, expandedAll, record, _level)
+ tmp = tmp.concat(children)
+ }
+ })
+ return tmp
+}
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
new file mode 100644
index 00000000..bed52aa5
--- /dev/null
+++ b/src/components/TreeTable/index.vue
@@ -0,0 +1,120 @@
+
+
+
+
+
+
+
+
+
+ {{scope.$index}}
+
+
+
+
+
+
+
+
+
+ {{scope.row[column.value]}}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md
new file mode 100644
index 00000000..790e7a0d
--- /dev/null
+++ b/src/components/TreeTable/readme.md
@@ -0,0 +1,73 @@
+## 写在前面
+此组件仅提供一个创建TreeTable的解决方案
+##prop说明
+###data
+ 必输
+
+ 原始数据,要求是一个数组或者对象
+ ```javascript
+ [{
+ key1:value1,
+ key2:value2,
+ children:[{
+ key1:value1
+ },{
+ key1:value1
+ }]
+ },{
+ key1:value1
+ }]
+ ```
+ 或者
+ ```javascript
+ {
+ key1:value1,
+ key2:value2,
+ children:[{
+ key1:value1
+ },{
+ key1:value1
+ }]
+ }
+ ```
+
+###columns
+ 列属性,要求是一个数组
+
+ 1. text: 显示在表头
+ 2. value: 对应data的key,treeTable将显示相应的value
+ 3. width: 每列的宽度,为一个数字
+ 如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
+ ```javascript
+ [{
+ value:string,
+ text:string,
+ width:number
+ },{
+ value:string,
+ text:string,
+ width:number
+ }]
+ ```
+
+### expandAll
+ 是否默认全部展开,boolean值,默认为false
+
+### evalFunc
+ 解析函数,function,非必须
+
+ 如果不提供,将使用默认的evalFunc
+
+ 如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考此目录下的*eval.js*
+
+### evalArgs
+ 解析函数的参数,是一个数组
+
+ **请注意,自定义的解析函数参数第一个为this.data,你不需要在evalArgs填写。**
+
+ 如你的解析函数需要的参数为`(this.data,1,2,3,4)`,那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
+ ## slot
+ 请参考`customTreeTable`
+
+ ## 其他
+ 如果有其他的需求,请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
\ No newline at end of file
diff --git a/src/lang/en.js b/src/lang/en.js
index b243b0a5..22f5606a 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -28,6 +28,8 @@ export default {
dragTable: 'Drag Table',
inlineEditTable: 'Inline Edit',
complexTable: 'Complex Table',
+ treeTable: 'treeTable',
+ customTreeTable: 'Custom TreeTable',
tab: 'Tab',
form: 'Form',
createForm: 'Create Form',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 4dd83533..c465cfee 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -28,6 +28,8 @@ export default {
dragTable: '拖拽table',
inlineEditTable: 'table内编辑',
complexTable: '综合table',
+ treeTable: '树表',
+ customTreeTable: '自定义树表',
tab: 'Tab',
form: '表单',
createForm: '创建表单',
diff --git a/src/router/index.js b/src/router/index.js
index bdb31816..85f961ec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -151,7 +151,9 @@ export const asyncRouterMap = [
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
- { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
+ { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }},
+ { path: 'treeTable', component: _import('example/table/treeTable/treeTable'), name: 'treeTable', meta: { title: 'treeTable' }},
+ { path: 'customTreeTable', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTable', meta: { title: 'customTreeTable' }}
]
},
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}
diff --git a/src/views/example/table/treeTable/customEval.js b/src/views/example/table/treeTable/customEval.js
new file mode 100644
index 00000000..6eac3928
--- /dev/null
+++ b/src/views/example/table/treeTable/customEval.js
@@ -0,0 +1,48 @@
+/**
+* @Author: jianglei
+* @Date: 2017-10-12 12:06:49
+*/
+'use strict'
+import Vue from 'vue'
+export default function treeToArray(data, parent, level, expandedAll, item) {
+ const marLTemp = []
+ let tmp = []
+ Array.from(data).forEach(function(record) {
+ if (record._expanded === undefined) {
+ Vue.set(record, '_expanded', expandedAll)
+ }
+ let _level = 1
+ if (level !== undefined && level !== null) {
+ _level = level + 1
+ }
+ Vue.set(record, '_level', _level)
+ // 如果有父元素
+ if (parent) {
+ Vue.set(record, 'parent', parent)
+ // 如果父元素有偏移量,需要计算在this的偏移量中
+ // 偏移量还与前面同级元素有关,需要加上前面所有元素的长度和
+ if (!marLTemp[_level]) {
+ marLTemp[_level] = 0
+ }
+ Vue.set(record, '_marginLeft', marLTemp[_level] + parent._marginLeft)
+ Vue.set(record, '_width', record[item] / parent[item] * parent._width)
+ // 在本次计算过偏移量后加上自己长度,以供下一个元素使用
+ marLTemp[_level] += record._width
+ } else {
+ // 如果为根
+ // 初始化偏移量存储map
+ marLTemp[record.id] = []
+ // map中是一个数组,存储的是每级的长度和
+ // 初始情况下为0
+ marLTemp[record.id][_level] = 0
+ Vue.set(record, '_marginLeft', 0)
+ Vue.set(record, '_width', 1)
+ }
+ tmp.push(record)
+ if (record.children && record.children.length > 0) {
+ const children = treeToArray(record.children, record, _level, expandedAll, item)
+ tmp = tmp.concat(children)
+ }
+ })
+ return tmp
+}
diff --git a/src/views/example/table/treeTable/customTreeTable.vue b/src/views/example/table/treeTable/customTreeTable.vue
new file mode 100644
index 00000000..e94c44de
--- /dev/null
+++ b/src/views/example/table/treeTable/customTreeTable.vue
@@ -0,0 +1,131 @@
+
+
+
+
+ {{scope.row.event}}
+ {{scope.row.timeLine+'ms'}}
+
+
+
+
+
+
+
+
+
+
+
+ 点击
+
+
+
+
+
+
+
+
diff --git a/src/views/example/table/treeTable/treeTable.vue b/src/views/example/table/treeTable/treeTable.vue
new file mode 100644
index 00000000..b696116f
--- /dev/null
+++ b/src/views/example/table/treeTable/treeTable.vue
@@ -0,0 +1,121 @@
+
+
+
+
+
+