zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[Tree-Table]: organize the structure and add documentation (#1673)

Browse Source
This commit is contained in:
花裤衩
2019-03-07 14:13:36 +08:00
committed by GitHub
parent dc6030bce6
commit 5ca6f79836
10 changed files with 365 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/table/treeTable/data.js → src/views/tree-table/custom/data.js
View File

@@ -1,4 +1,4 @@
export const data = [
const data = [
{
name: '1',
timeLine: 100,
@@ -47,3 +47,5 @@ export const data = [
}
]
export default data

23
src/views/table/treeTable/customTreeTable.vue → src/views/tree-table/custom/index.vue
View File

@@ -1,12 +1,10 @@
<template>
<div>
<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>
<el-button type="primary" size="small" style="margin:0 0 20px 0;">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-button>
<tree-table
ref="TreeTable"
@@ -85,9 +83,8 @@
</template>
<script>
import TreeTable from '@/components/TreeTable'
import { data } from './data.js'
import data from './data.js'
export default {
components: { TreeTable },
@@ -145,11 +142,11 @@ export default {
},
addMenuItem(row, type) {
if (type === 'children') {
this.$refs.TreeTable.addChild(row, { name: 'child' })
this.$refs.TreeTable.addChild(row, { name: 'child', timeLine: this.randomNum() })
}
if (type === 'brother') {
this.$refs.TreeTable.addBrother(row, { name: 'brother' })
this.$refs.TreeTable.addBrother(row, { name: 'brother', timeLine: this.randomNum() })
}
},
deleteItem(row) {
@@ -157,6 +154,12 @@ export default {
},
selectChange(val) {
console.log(val)
},
randomNum() {
// return 1~100
const max = 100
const min = 1
return Math.floor(Math.random() * (max - min + 1) + min)
}
}
}

80
src/views/tree-table/data.js Normal file
View File

@@ -0,0 +1,80 @@
const data = [
{
id: 0,
event: 'Event-0',
timeLine: 50
},
{
id: 1,
event: 'Event-1',
timeLine: 100,
children: [
{
id: 2,
event: 'Event-2',
timeLine: 10
},
{
id: 3,
event: 'Event-3',
timeLine: 90,
children: [
{
id: 4,
event: 'Event-4',
timeLine: 5
},
{
id: 5,
event: 'Event-5',
timeLine: 10
},
{
id: 6,
event: 'Event-6',
timeLine: 75,
children: [
{
id: 7,
event: 'Event-7',
timeLine: 50,
children: [
{
id: 71,
event: 'Event-7-1',
timeLine: 25
},
{
id: 72,
event: 'Event-7-2',
timeLine: 5
},
{
id: 73,
event: 'Event-7-3',
timeLine: 20
}
]
},
{
id: 8,
event: 'Event-8',
timeLine: 25
}
]
}
]
}
]
}
]
export default data

96
src/views/table/treeTable/treeTable.vue → src/views/tree-table/index.vue
View File

@@ -3,7 +3,7 @@
<div style="margin-bottom:20px;">
<el-button type="primary" class="option-item">
<el-button type="primary" size="small" class="option-item">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-button>
@@ -42,8 +42,8 @@
</template>
<script>
import treeTable from '@/components/TreeTable'
import data from './data'
export default {
name: 'TreeTableDemo',
@@ -78,83 +78,7 @@ export default {
key: 'operation'
}
],
data: [
{
id: 0,
event: 'Event-0',
timeLine: 50
},
{
id: 1,
event: 'Event-1',
timeLine: 100,
children: [
{
id: 2,
event: 'Event-2',
timeLine: 10
},
{
id: 3,
event: 'Event-3',
timeLine: 90,
children: [
{
id: 4,
event: 'Event-4',
timeLine: 5
},
{
id: 5,
event: 'Event-5',
timeLine: 10
},
{
id: 6,
event: 'Event-6',
timeLine: 75,
children: [
{
id: 7,
event: 'Event-7',
timeLine: 50,
children: [
{
id: 71,
event: 'Event-7-1',
timeLine: 25
},
{
id: 72,
event: 'Event-7-2',
timeLine: 5
},
{
id: 73,
event: 'Event-7-3',
timeLine: 20
}
]
},
{
id: 8,
event: 'Event-8',
timeLine: 25
}
]
}
]
}
]
}
]
data: data
}
},
watch: {
@@ -176,6 +100,20 @@ export default {
},
click(scope) {
console.log(scope)
const row = scope.row
const message = Object.keys(row)
.map(i => {
return `<p>${i}: ${row[i]}</p>`
})
.join('')
this.$notify({
title: 'Success',
dangerouslyUseHTMLString: true,
message: message,
type: 'success'
})
}
}
}