<template>
|
<div class="tree">
|
<div v-for="(item, index) of list" :key="index" @click.stop="clickIten(item)">
|
<div class="tree_item">
|
<i class="el-icon-caret-bottom" :class="{ 'activeColor': item[defaultProps.status] }" v-show="item[defaultProps.status] && item[defaultProps.children]"></i>
|
<i class="el-icon-caret-right color" v-show="item[defaultProps.children] && !item[defaultProps.status]"></i>
|
<div class="tree_item_label long-title-style" :title="item[defaultProps.name]" :class="{ 'activeColor': item[defaultProps.status] && !item[defaultProps.children] }">{{ item[defaultProps.name] }}</div>
|
</div>
|
<div class="tree_childern" v-show="item[defaultProps.status]">
|
<tree
|
:list="item[defaultProps.children]"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
/>
|
<!-- @callback="callback" -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import Bus from '@/utils/eventBus'
|
export default {
|
name: 'tree',
|
props: {
|
list: {
|
type: Array,
|
required: false,
|
default: () => []
|
},
|
defaultProps: {
|
type: Object,
|
require: false,
|
default: () => {
|
return {
|
name: 'name',
|
status: 'status',
|
children: 'children',
|
id: 'id'
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
tempItem: {
|
id: null,
|
name: null
|
}
|
}
|
},
|
methods: {
|
// 点击当前项
|
clickIten (item) {
|
item[this.defaultProps.status] = !item[this.defaultProps.status]
|
this.list.forEach(subItem => {
|
if ((subItem[this.defaultProps.id] !== item[this.defaultProps.id] && subItem[this.defaultProps.status]) || (this.list.length === 1 && subItem[this.defaultProps.status] === false)) {
|
subItem[this.defaultProps.status] = false
|
if (subItem[this.defaultProps.children]) {
|
this.recursion(subItem[this.defaultProps.children])
|
}
|
}
|
})
|
if (this.tempItem['id'] === item[this.defaultProps.id]) {
|
this.tempItem = {
|
id: null,
|
name: null
|
}
|
} else {
|
this.tempItem.id = item[this.defaultProps.id]
|
this.tempItem.name = item[this.defaultProps.name]
|
}
|
|
this.$emit('callback', this.tempItem, item)
|
},
|
// 递归方法
|
recursion (children) {
|
children.forEach(item => {
|
item[this.defaultProps.status] = false
|
if (item[this.defaultProps.children]) {
|
this.recursion(item[this.defaultProps.children])
|
}
|
})
|
},
|
callback (data, item) {
|
if (this.tempItem.id === data.id) {
|
this.tempItem = {}
|
} else {
|
this.tempItem.id = data.id
|
this.tempItem.name = data.name
|
}
|
this.$emit('callback', this.tempItem, item)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tree {
|
/*width: 100%;*/
|
/*height: auto;*/
|
/*border-radius: 5px;*/
|
/*overflow: hidden;*/
|
/*border: 1px solid #eeeeee;*/
|
/*box-sizing: border-box;*/
|
.tree_childern {
|
margin-left: 20px;
|
}
|
.activeItem {
|
background: #F4F7FC;
|
}
|
.tree_item {
|
display: flex;
|
align-items: center;
|
height: 48px;
|
cursor: pointer;
|
padding-left: 10px;
|
.tree_item_label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333333;
|
white-space: nowrap;
|
}
|
i {
|
margin-right: 5px;
|
}
|
.color {
|
color: #999999 !important;
|
}
|
.activeColor {
|
color: #305ED5 !important;
|
}
|
}
|
}
|
</style>
|
