This commit is contained in:
Pan
parent
60bddfedec
commit
ed1cf7e93e
|
|
@ -1,139 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
|
|
||||||
<el-tag style="margin-bottom:20px;">
|
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
|
||||||
</el-tag>
|
|
||||||
|
|
||||||
<tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
|
|
||||||
<el-table-column label="事件">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span style="color:sandybrown">{{ scope.row.event }}</span>
|
|
||||||
<el-tag>{{ scope.row.timeLine+'ms' }}</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="时间线">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
|
|
||||||
<div class="processContainer">
|
|
||||||
<div
|
|
||||||
: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' }"
|
|
||||||
class="process"
|
|
||||||
>
|
|
||||||
<span style="display:inline-block" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="200">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" @click="message(scope.row)">点击</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</tree-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
Auth: Lei.j1ang
|
|
||||||
Created: 2018/1/19-14:54
|
|
||||||
*/
|
|
||||||
import treeTable from '@/components/TreeTable'
|
|
||||||
import treeToArray from './customEval'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CustomTreeTableDemo',
|
|
||||||
components: { treeTable },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
func: treeToArray,
|
|
||||||
expandAll: false,
|
|
||||||
data:
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
event: '事件1',
|
|
||||||
timeLine: 100,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
event: '事件2',
|
|
||||||
timeLine: 10,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
event: '事件3',
|
|
||||||
timeLine: 90,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
event: '事件4',
|
|
||||||
timeLine: 5,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
event: '事件5',
|
|
||||||
timeLine: 10,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
event: '事件6',
|
|
||||||
timeLine: 75,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
event: '事件7',
|
|
||||||
timeLine: 50,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 71,
|
|
||||||
event: '事件71',
|
|
||||||
timeLine: 25,
|
|
||||||
comment: 'xx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 72,
|
|
||||||
event: '事件72',
|
|
||||||
timeLine: 5,
|
|
||||||
comment: 'xx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 73,
|
|
||||||
event: '事件73',
|
|
||||||
timeLine: 20,
|
|
||||||
comment: 'xx'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
event: '事件8',
|
|
||||||
timeLine: 25,
|
|
||||||
comment: '无'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
args: [null, null, 'timeLine']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
message(row) {
|
|
||||||
this.$message.info(row.event)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
|
|
||||||
<el-tag style="margin-bottom:20px;">
|
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
|
||||||
</el-tag>
|
|
||||||
|
|
||||||
<tree-table :data="data" :columns="columns" border />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
Auth: Lei.j1ang
|
|
||||||
Created: 2018/1/19-14:54
|
|
||||||
*/
|
|
||||||
import treeTable from '@/components/TreeTable'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TreeTableDemo',
|
|
||||||
components: { treeTable },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
text: '事件',
|
|
||||||
value: 'event',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: 'ID',
|
|
||||||
value: 'id'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '时间线',
|
|
||||||
value: 'timeLine'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '备注',
|
|
||||||
value: 'comment'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
event: '事件1',
|
|
||||||
timeLine: 50,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
event: '事件1',
|
|
||||||
timeLine: 100,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
event: '事件2',
|
|
||||||
timeLine: 10,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
event: '事件3',
|
|
||||||
timeLine: 90,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
event: '事件4',
|
|
||||||
timeLine: 5,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
event: '事件5',
|
|
||||||
timeLine: 10,
|
|
||||||
comment: '无'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
event: '事件6',
|
|
||||||
timeLine: 75,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
event: '事件7',
|
|
||||||
timeLine: 50,
|
|
||||||
comment: '无',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 71,
|
|
||||||
event: '事件71',
|
|
||||||
timeLine: 25,
|
|
||||||
comment: 'xx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 72,
|
|
||||||
event: '事件72',
|
|
||||||
timeLine: 5,
|
|
||||||
comment: 'xx'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 73,
|
|
||||||
event: '事件73',
|
|
||||||
timeLine: 20,
|
|
||||||
comment: 'xx'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
event: '事件8',
|
|
||||||
timeLine: 25,
|
|
||||||
comment: '无'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue