1.story.vue页面
<
template
>
<
div
class=
"app-container"
>
<
el-tag
style=
"margin-bottom:20px;"
>
<
a
href=
""
target=
"_blank"
>选择
</
a
>
</
el-tag
>
<
tree-table
:data="
data"
:evalFunc="
func"
:evalArgs="
args"
:expandAll="
expandAll"
border
>
<
el-table-column
label=
"名称"
>
<
template
slot-scope=
"scope"
>
<!-- <span :style="{ color: scope.row.type === 'B' ? '' : 'sandybrown' }">{{scope.row.event}}</span> -->
<
span
v-if="
scope.
row.
type
===
'B'"
style=
"color:sandybrown"
>{{
scope.
row.
event}}
</
span
>
<
span
v-if="
scope.
row.
type
===
'Q'"
style=
"color:#37cbbf"
>{{
scope.
row.
event}}
</
span
>
<
span
v-if="
scope.
row.
type
===
'S'"
style=
"color:rgba(0, 0, 233, 0.5)"
>{{
scope.
row.
event}}
</
span
>
<
el-tag
v-if='
scope.
row.
timeLine'
style=
"border-radius:10px;"
size=
"small"
>{{
scope.
row.
timeLine
===
undefined
?
''
:
scope.
row.
timeLine
+
'个' }}
</
el-tag
>
</
template
>
</
el-table-column
>
<
el-table-column
type=
"expand"
label=
"展开"
>
<
template
slot-scope=
"props"
>
<
el-form
label-position=
"left"
inline
class=
"demo-table-expand"
style=
"width:70%;padding-left:150px;"
>
<
el-form-item
label=
"类型"
>
<
span
>{{
props.
row.
type }}
</
span
>
</
el-form-item
>
<
el-form-item
label=
"负责人"
>
<
span
>{{
props.
row.
name }}
</
span
>
</
el-form-item
>
<
el-form-item
label=
"计划时间"
>
<
span
>{{
props.
row.
category }}
</
span
>
</
el-form-item
>
<
el-form-item
label=
"实际时间"
>
<
span
>{{
props.
row.
address }}
</
span
>
</
el-form-item
>
<
el-form-item
label=
"描述"
>
<
span
>{{
props.
row.
desc }}
</
span
>
</
el-form-item
>
</
el-form
>
</
template
>
</
el-table-column
>
<!-- <el-table-column label="时间线">
<template slot-scope="scope">
<el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
<div class="processContainer">
<div class="process" :style="{ width:scope.row._width * 500+'px',
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
marginLeft:scope.row._marginLeft * 500+'px' }">
<span style="display:inline-block"></span>
</div>
</div>
</el-tooltip>
</template>
</el-table-column> -->
<
el-table-column
label=
"操作"
width=
"200"
>
<
template
slot-scope=
"scope"
>
<
el-button
v-if="
scope.
row.
type
===
'Q'"
type=
"text"
@click="
message(
scope.
row)"
>添加
</
el-button
>
</
template
>
</
el-table-column
>
</
tree-table
>
</
div
>
</
template
>
<
script
>
import
treeTable
from
'@/components/TreeTable'
import
treeToArray
from
'./storyEval'
import {
isEmptyObject }
from
'@/utils'
// 工具类 isEmptyObject 判空
export
default {
name:
'strotyTable',
components: {
treeTable },
data() {
return {
func:
treeToArray,
expandAll:
false,
data:
{
id:
1,
event:
'版本1',
timeLine:
2,
comment:
'无',
type:
'B',
children: [
{
id:
11,
event:
'需求1_1',
timeLine:
0,
type:
'Q',
comment:
'无'
},
{
id:
12,
event:
'需求1_2',
timeLine:
3,
type:
'Q',
comment:
'无',
children: [
{
id:
121,
event:
'story1_2_1',
type:
'S',
comment:
'无'
},
{
id:
122,
event:
'story1_2_2',
type:
'S',
comment:
'无'
},
{
id:
123,
event:
'story1_2_3',
type:
'S',
comment:
'无'
}
]
}
]
},
args: [
null,
null,
'timeLine']
}
},
methods: {
message(
row) {
if (
row.
type
===
'B') {
var
addMentB
= {
id:
13,
event:
'需求1_3',
type:
'Q',
timeLine:
0,
comment:
'无'
}
isEmptyObject(
row.
children)
?
row.
children
= []
:
''
row.
children.
push(
addMentB)
}
if (
row.
type
===
'Q') {
var
addMentQ
= {
id:
131,
event:
'story..',
type:
'S',
comment:
'无'
}
isEmptyObject(
row.
children)
?
row.
children
= []
:
''
row.
children.
push(
addMentQ)
}
row.
timeLine
++
console.
log(
row.
children)
this.
$message.
info(
row.
event)
}
}
}
</
script
>
<
style
>
.demo-table-expand {
font-size:
0;
}
.demo-table-expand label {
width:
90px;
color:
#99a9bf;
}
.demo-table-expand .el-form-item {
margin-right:
0;
margin-bottom:
0;
width:
50%;
}
</
style
>
2.storyEval.js
'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
}
3.效果图
参考：http://element-cn.eleme.io/#/zh-CN/component/table