diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js
index dcb8fe24..96d16832 100644
--- a/src/components/TreeTable/eval.js
+++ b/src/components/TreeTable/eval.js
@@ -1,24 +1,29 @@
import Vue from 'vue'
// 给数据添加额外的几个属性,并且扁平化数组
-export default function formatData(
+export default function treeToTable(
data,
- { parent = null, leavel = 0, expand = false } = {}
+ { parent = null, leavel = 0, expand = false, children = 'children', show = true, select = false } = {}
) {
- console.log('data', data)
let tmp = []
data.forEach(item => {
Vue.set(item, '__leavel', leavel)
Vue.set(item, '__expand', expand)
Vue.set(item, '__parent', parent)
+ Vue.set(item, '__show', show)
+ Vue.set(item, '__select', select)
tmp.push(item)
- if (item.children && item.children.length > 0) {
- const children = formatData(item.children, {
+ if (item[children] && item[children].length > 0) {
+ const res = treeToTable(item[children], {
parent: item,
- leavel: leavel + 1
+ leavel: leavel + 1,
+ expand,
+ children,
+ status,
+ select
})
- tmp = tmp.concat(children)
+ tmp = tmp.concat(res)
}
})
return tmp
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 5421fb51..ef171194 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -1,26 +1,30 @@
-
-
-
-
- {{ scope.row[item.key] }}
+
+
+
+
+
+
+
+ {{ scope.row[item.key] }}
+
@@ -44,7 +48,7 @@ export default {
evalFunc: {
type: Function
},
- evalArgs: Array
+ evalArgs: Object
/* eslint-enable */
},
computed: {
@@ -59,30 +63,38 @@ export default {
const func = this.evalFunc || treeToArray
const args = { ...this.evalArgs }
return func(tmp, args)
+ },
+
+ // 自定义的children字段
+ children() {
+ return this.evalArgs && this.evalArgs.children || 'children'
}
},
methods: {
isShowRow: function(row) {
- const show = row.row.__parent ? row.row.__parent.__expand : true
+ const parent = row.row.__parent
+ const show = parent ? parent.__expand && parent.__show : true
+ row.row.__show = show
return show
? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
: 'display:none;'
},
- isNotLastChild(index, record) {
- return index === 0 && record.children && record.children.length > 0
+ isShowSperadIcon(record) {
+ return record[this.children] && record[this.children].length > 0
},
toggleExpanded(trIndex) {
const record = this.res[trIndex]
const expand = !record.__expand
record.__expand = expand
- // 默认收起是全部收起,展开是一级一级展开
- if (!expand) {
- this.expandRecursion(record, expand)
- }
+ // 收起是全部收起,展开是一级一级展开
+ // if (!expand) {
+ // this.expandRecursion(record, expand)
+ // }
},
expandRecursion(row, expand) {
- if (row.children && row.children.length > 0) {
- row.children.map(child => {
+ const children = row[this.children]
+ if (children && children.length > 0) {
+ children.map(child => {
child.__expand = expand
this.expandRecursion(child, expand)
})
diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md
index c23d8cb1..a3aceb5c 100644
--- a/src/components/TreeTable/readme.md
+++ b/src/components/TreeTable/readme.md
@@ -80,7 +80,25 @@ const columns = [
#### evalArgs
-解析函数的参数,是一个对象,如果需要展开所有的数据,那么就传入`{expand:true}`
+解析函数的参数,是一个对象,
+
+- parent = null
+
+树的顶层节点默认为 null
+
+- leavel = 0
+
+默认第一层级为0,然后依次递增
+
+- expand = false
+
+如果需要展开所有的数据,那么就传入`{expand:true}`
+
+- children = 'children'
+
+如果后台返回的数据不都是带有children字段,那么修改一下即可
+
+
## 其他
diff --git a/src/views/table/treeTable/customEval.js b/src/views/table/treeTable/customEval.js
deleted file mode 100644
index 73badb68..00000000
--- a/src/views/table/treeTable/customEval.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
-* @Author: jianglei
-* @Date: 2017-10-12 12:06:49
-*/
-'use strict'
-import Vue from 'vue'
-export default function treeToArray(data, expandAll, parent, level, item) {
- const marLTemp = []
- let tmp = []
- Array.from(data).forEach(function(record) {
- if (record._expanded === undefined) {
- Vue.set(record, '_expanded', expandAll)
- }
- 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, expandAll, record, _level, item)
- tmp = tmp.concat(children)
- }
- })
- return tmp
-}
diff --git a/src/views/table/treeTable/customTreeTable.vue b/src/views/table/treeTable/customTreeTable.vue
index 2a216171..458edb68 100644
--- a/src/views/table/treeTable/customTreeTable.vue
+++ b/src/views/table/treeTable/customTreeTable.vue
@@ -5,109 +5,111 @@
Documentation
-
-
-
- {{ scope.row.event }}
- {{ scope.row.timeLine+'ms' }}
-
-
-
-
-
-
-
-
-
-
-
- 点击
-
-
+
+
+
+ 全
+ 选
+