Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit dc9e27e

Browse files
leij1angPanJiaChen
leij1ang
authored and
PanJiaChen
committed
1.fix bug (PanJiaChen#431)
* 1.fix bug 2.update treeTable readme 3.update args name in treetable/eval.js * 1.treeTable animate
1 parent d754eae commit dc9e27e

File tree

5 files changed

+24
-13
lines changed

5 files changed

+24
-13
lines changed

‎src/components/TreeTable/eval.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
*/
55
'use strict'
66
import Vue from 'vue'
7-
export default function treeToArray(data, expandedAll, parent = null, level = null) {
7+
export default function treeToArray(data, expandAll, parent = null, level = null) {
88
let tmp = []
99
Array.from(data).forEach(function(record) {
1010
if (record._expanded === undefined) {
11-
Vue.set(record, '_expanded', expandedAll)
11+
Vue.set(record, '_expanded', expandAll)
1212
}
1313
let _level = 1
1414
if (level !== undefined && level !== null) {
@@ -21,7 +21,7 @@ export default function treeToArray(data, expandedAll, parent = null, level = nu
2121
}
2222
tmp.push(record)
2323
if (record.children && record.children.length > 0) {
24-
const children = treeToArray(record.children, expandedAll, record, _level)
24+
const children = treeToArray(record.children, expandAll, record, _level)
2525
tmp = tmp.concat(children)
2626
}
2727
})

‎src/components/TreeTable/index.vue

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export default {
5858
tmp = this.data
5959
}
6060
const func = this.evalFunc || treeToArray
61-
const args = this.evalArgs ? Array.concat([tmp], this.evalArgs) : [tmp, this.expandAll]
61+
const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
6262
return func.apply(null, args)
6363
}
6464
},
6565
methods: {
6666
showRow: function(row) {
6767
const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
6868
row.row._show = show
69-
return show ? '' : 'display:none;'
69+
return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
7070
},
7171
// 切换下级是否展开
7272
toggleExpanded: function(trIndex) {
@@ -80,6 +80,16 @@ export default {
8080
}
8181
}
8282
</script>
83+
<style rel="stylesheet/css">
84+
@keyframes treeTableShow {
85+
from {opacity: 0;}
86+
to {opacity: 1;}
87+
}
88+
@-webkit-keyframes treeTableShow {
89+
from {opacity: 0;}
90+
to {opacity: 1;}
91+
}
92+
</style>
8393

8494
<style lang="scss" rel="stylesheet/scss" scoped>
8595
$color-blue: #2196F3;

‎src/components/TreeTable/readme.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,11 @@
7070
#### evalArgs
7171
解析函数的参数，是一个数组
7272

73-
**请注意，自定义的解析函数参数第一个为this.data，你不需要在evalArgs填写。** *this.data为需要解析的数据*
73+
**请注意，自定义的解析函数参数第一个为this.data，第二个参数为， this.expandAll,你不需要在evalArgs填写。一定记住，这两个参数是强制性的，并且位置不可颠倒** *this.data为需要解析的数据，this.expandAll为是否默认展开*
7474

75-
如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
75+
如你的解析函数需要的参数为`(this.data, this.expandAll,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
7676

77-
如果你的解析函数参数只有一个`(this.data)`,那么就可以不用填写evalArgs了
77+
如果你的解析函数参数只有`(this.data, this.expandAll)`,那么就可以不用填写evalArgs了
7878

7979
具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
8080

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
*/
55
'use strict'
66
import Vue from 'vue'
7-
export default function treeToArray(data, parent, level, expandedAll, item) {
7+
export default function treeToArray(data, expandAll, parent, level, item) {
88
const marLTemp = []
99
let tmp = []
1010
Array.from(data).forEach(function(record) {
1111
if (record._expanded === undefined) {
12-
Vue.set(record, '_expanded', expandedAll)
12+
Vue.set(record, '_expanded', expandAll)
1313
}
1414
let _level = 1
1515
if (level !== undefined && level !== null) {
@@ -40,7 +40,7 @@ export default function treeToArray(data, parent, level, expandedAll, item) {
4040
}
4141
tmp.push(record)
4242
if (record.children && record.children.length > 0) {
43-
const children = treeToArray(record.children, record, _level, expandedAll, item)
43+
const children = treeToArray(record.children, expandAll, record, _level, item)
4444
tmp = tmp.concat(children)
4545
}
4646
})

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
66
</el-tag>
77

8-
<tree-table :data="data" :evalFunc="func" :evalArgs="args" border>
8+
<tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
99
<el-table-column label="事件">
1010
<template slot-scope="scope">
1111
<span style="color:sandybrown">{{scope.row.event}}</span>
@@ -48,6 +48,7 @@ export default {
4848
data() {
4949
return {
5050
func: treeToArray,
51+
expandAll: false,
5152
data:
5253
{
5354
id: 1,
@@ -123,7 +124,7 @@ export default {
123124
}
124125
]
125126
},
126-
args: [null, null, true, 'timeLine']
127+
args: [null, null, 'timeLine']
127128
}
128129
},
129130
methods: {

0 commit comments

Comments
 (0)