190 lines
4.1 KiB
Vue
190 lines
4.1 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
|
|
<div style="margin-bottom:20px;">
|
|
|
|
<el-button type="primary" class="option-item">
|
|
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
|
</el-button>
|
|
|
|
<div class="option-item">
|
|
<el-tag>默认展开所有</el-tag>
|
|
<el-switch
|
|
v-model="defaultExpandAll"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
@change="reset"/>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<el-tag>显示Checkbox</el-tag>
|
|
<el-switch
|
|
v-model="showCheckbox"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
|
|
<template slot="scope" slot-scope="{scope}">
|
|
<el-tag>level: {{ scope.row._level }}</el-tag>
|
|
<el-tag>expand: {{ scope.row._expand }}</el-tag>
|
|
<el-tag>select: {{ scope.row._select }}</el-tag>
|
|
</template>
|
|
<template slot="operation" slot-scope="{scope}">
|
|
<el-button type="primary" size="" @click="click(scope)">Click</el-button>
|
|
</template>
|
|
</tree-table>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import treeTable from '@/components/TreeTable'
|
|
|
|
export default {
|
|
name: 'TreeTableDemo',
|
|
components: { treeTable },
|
|
data() {
|
|
return {
|
|
defaultExpandAll: false,
|
|
showCheckbox: true,
|
|
key: 1,
|
|
columns: [
|
|
{
|
|
label: 'Checkbox',
|
|
checkbox: true
|
|
},
|
|
{
|
|
label: '',
|
|
key: 'id',
|
|
expand: true
|
|
},
|
|
{
|
|
label: 'Event',
|
|
key: 'event',
|
|
width: 200,
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: 'Scope',
|
|
key: 'scope'
|
|
},
|
|
{
|
|
label: 'Operation',
|
|
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
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
showCheckbox(val) {
|
|
if (val) {
|
|
this.columns.unshift({
|
|
label: 'Checkbox',
|
|
checkbox: true
|
|
})
|
|
} else {
|
|
this.columns.shift()
|
|
}
|
|
this.reset()
|
|
}
|
|
},
|
|
methods: {
|
|
reset() {
|
|
++this.key
|
|
},
|
|
click(scope) {
|
|
console.log(scope)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.option-item{
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|