update
This commit is contained in:
Pan
parent
e894a1c59d
commit
e52c9075cc
|
|
@ -1,10 +1,10 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
// 扁平化数组
|
||||
// Flattened array
|
||||
export default function treeToArray(data, children = 'children') {
|
||||
let tmp = []
|
||||
data.forEach((item, idx) => {
|
||||
Vue.set(item, '__index', idx)
|
||||
Vue.set(item, '_index', idx)
|
||||
tmp.push(item)
|
||||
if (item[children] && item[children].length > 0) {
|
||||
const res = treeToArray(item[children], children)
|
||||
|
|
@ -14,15 +14,13 @@ export default function treeToArray(data, children = 'children') {
|
|||
return tmp
|
||||
}
|
||||
|
||||
// 给数据添加额外的几个属性
|
||||
// 清除__parent属性，因数据循环引用，使用JSON.stringify()报错
|
||||
export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
|
||||
data.forEach((item, idx) => {
|
||||
Vue.set(item, '__level', level)
|
||||
Vue.set(item, '__expand', expand)
|
||||
Vue.set(item, '__parent', parent)
|
||||
Vue.set(item, '__show', show)
|
||||
Vue.set(item, '__select', select)
|
||||
data.forEach(item => {
|
||||
Vue.set(item, '_level', level)
|
||||
Vue.set(item, '_expand', expand)
|
||||
Vue.set(item, '_parent', parent)
|
||||
Vue.set(item, '_show', show)
|
||||
Vue.set(item, '_select', select)
|
||||
if (item[children] && item[children].length > 0) {
|
||||
addAttrs(item[children], {
|
||||
parent: item,
|
||||
|
|
@ -36,14 +34,12 @@ export function addAttrs(data, { parent = null, level = 0, expand = false, child
|
|||
})
|
||||
}
|
||||
|
||||
// 清除__parent属性
|
||||
export function cleanAttrs(data, children = 'children') {
|
||||
data.forEach(item => {
|
||||
item.__parent = null
|
||||
item._parent = null
|
||||
if (item[children] && item[children].length > 0) {
|
||||
addAttrs(item[children], children)
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,23 +11,23 @@
|
|||
<template slot-scope="scope">
|
||||
<slot :scope="scope" :name="item.key">
|
||||
<template v-if="item.expand">
|
||||
<span :style="{'padding-left':+scope.row.__level*spreadOffset + 'px'} "/>
|
||||
<span :style="{'padding-left':+scope.row._level*spreadOffset + 'px'} "/>
|
||||
<span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row.__expand" class="el-icon-plus" />
|
||||
<i v-if="!scope.row._expand" class="el-icon-plus" />
|
||||
<i v-else class="el-icon-minus" />
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="item.checkbox">
|
||||
<el-checkbox
|
||||
v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
|
||||
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
|
||||
:indeterminate="scope.row.__select"
|
||||
v-model="scope.row.__select"
|
||||
:style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
|
||||
:indeterminate="scope.row._select"
|
||||
v-model="scope.row._select"
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
<el-checkbox
|
||||
v-else
|
||||
:style="{'padding-left':+scope.row.__level*checkboxOffset + 'px'} "
|
||||
v-model="scope.row.__select"
|
||||
:style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
|
||||
v-model="scope.row._select"
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
</template>
|
||||
{{ scope.row[item.key] }}
|
||||
|
|
@ -89,7 +89,7 @@ export default {
|
|||
this.tableData = []
|
||||
return
|
||||
}
|
||||
|
||||
console.log('render')
|
||||
if (this.guard > 0) {
|
||||
addAttrs(val, {
|
||||
expand: this.defaultExpandAll,
|
||||
|
|
@ -101,15 +101,15 @@ export default {
|
|||
const retval = treeToArray(val, this.defaultChildren)
|
||||
this.tableData = retval
|
||||
},
|
||||
deep: true,
|
||||
// deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showRow: function({ row }) {
|
||||
const parent = row.__parent
|
||||
const show = parent ? parent.__expand && parent.__show : true
|
||||
row.__show = show
|
||||
const parent = row._parent
|
||||
const show = parent ? parent._expand && parent._show : true
|
||||
row._show = show
|
||||
return show
|
||||
? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
|
||||
: 'display:none;'
|
||||
|
|
@ -119,22 +119,22 @@ export default {
|
|||
},
|
||||
toggleExpanded(trIndex) {
|
||||
const record = this.tableData[trIndex]
|
||||
const expand = !record.__expand
|
||||
record.__expand = expand
|
||||
const expand = !record._expand
|
||||
record._expand = expand
|
||||
},
|
||||
handleCheckAllChange(row) {
|
||||
this.selcetRecursion(row, row.__select, this.defaultChildren)
|
||||
this.isIndeterminate = row.__select
|
||||
this.selcetRecursion(row, row._select, this.defaultChildren)
|
||||
this.isIndeterminate = row._select
|
||||
},
|
||||
selcetRecursion(row, select, children = 'children') {
|
||||
if (select) {
|
||||
this.$set(row, '__expand', true)
|
||||
this.$set(row, '__show', true)
|
||||
this.$set(row, '_expand', true)
|
||||
this.$set(row, '_show', true)
|
||||
}
|
||||
const sub_item = row[children]
|
||||
if (sub_item && sub_item.length > 0) {
|
||||
sub_item.map(child => {
|
||||
child.__select = select
|
||||
child._select = select
|
||||
this.selcetRecursion(child, select, children)
|
||||
})
|
||||
}
|
||||
|
|
@ -164,20 +164,6 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
$color-blue: #2196f3;
|
||||
$space-width: 18px;
|
||||
.ms-tree-space {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
width: $space-width;
|
||||
height: 14px;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.tree-ctrl {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,42 @@
|
|||
<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>
|
||||
<div style="margin-bottom:20px;">
|
||||
|
||||
<tree-table :data="data" :columns="columns" border/>
|
||||
<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>
|
||||
|
|
@ -19,6 +50,9 @@ export default {
|
|||
components: { treeTable },
|
||||
data() {
|
||||
return {
|
||||
defaultExpandAll: false,
|
||||
showCheckbox: true,
|
||||
key: 1,
|
||||
columns: [
|
||||
{
|
||||
label: 'Checkbox',
|
||||
|
|
@ -36,88 +70,83 @@ export default {
|
|||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '时间线',
|
||||
key: 'timeLine'
|
||||
label: 'Scope',
|
||||
key: 'scope'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
key: 'comment'
|
||||
label: 'Operation',
|
||||
key: 'operation'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 0,
|
||||
event: 'Event-0',
|
||||
timeLine: 50,
|
||||
comment: '无'
|
||||
timeLine: 50
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
event: 'Event-1',
|
||||
timeLine: 100,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
event: 'Event-2',
|
||||
timeLine: 10,
|
||||
comment: '无'
|
||||
timeLine: 10
|
||||
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
event: 'Event-3',
|
||||
timeLine: 90,
|
||||
comment: '无',
|
||||
children: [
|
||||
{
|
||||
id: 4,
|
||||
event: 'Event-4',
|
||||
timeLine: 5,
|
||||
comment: '无'
|
||||
timeLine: 5
|
||||
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
event: 'Event-5',
|
||||
timeLine: 10,
|
||||
comment: '无'
|
||||
timeLine: 10
|
||||
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
event: 'Event-6',
|
||||
timeLine: 75,
|
||||
comment: '无',
|
||||
|
||||
children: [
|
||||
{
|
||||
id: 7,
|
||||
event: 'Event-7',
|
||||
timeLine: 50,
|
||||
comment: '无',
|
||||
|
||||
children: [
|
||||
{
|
||||
id: 71,
|
||||
event: 'Event-7-1',
|
||||
timeLine: 25,
|
||||
comment: 'xx'
|
||||
timeLine: 25
|
||||
|
||||
},
|
||||
{
|
||||
id: 72,
|
||||
event: 'Event-7-2',
|
||||
timeLine: 5,
|
||||
comment: 'xx'
|
||||
timeLine: 5
|
||||
|
||||
},
|
||||
{
|
||||
id: 73,
|
||||
event: 'Event-7-3',
|
||||
timeLine: 20,
|
||||
comment: 'xx'
|
||||
timeLine: 20
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
event: 'Event-8',
|
||||
timeLine: 25,
|
||||
comment: '无'
|
||||
timeLine: 25
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -127,6 +156,34 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue