<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"-->
|
<!-- />-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="tree">
|
<div v-for="(item, index) in list" :key="index" @click.stop="clickIten(item)">
|
<div class="tree_item">
|
<i class="el-icon-caret-bottom" :class="{ 'activeColor': item.status }" v-show="item.status === 1 && item.companyDTOList.length > 0"></i>
|
<i class="el-icon-caret-right color" v-show="item.companyDTOList.length > 0 && item.status === 0"></i>
|
<div class="tree_item_label long-title-style" :title="item.name" :class="{ 'activeColor': item.status === 1 && item.companyDTOList.length === 0 }">{{ item.name }}</div>
|
</div>
|
<div class="tree_childern" v-show="item.status === 1">
|
<tree
|
:list="item.companyDTOList"
|
:defaultProps="defaultProps"
|
@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) {
|
this.recursion(this.list)
|
item.status === 0 ? item.status = 1 : item.status = 0
|
// 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', item)
|
},
|
// 递归方法
|
recursion (children) {
|
// children.forEach(item => {
|
// item[this.defaultProps.status] = false
|
// if (item[this.defaultProps.children]) {
|
// this.recursion(item[this.defaultProps.children])
|
// }
|
// })
|
children.forEach(item => {
|
item.status = 0
|
if (item.companyDTOList.length > 0) {
|
this.recursion(item.companyDTOList)
|
}
|
})
|
},
|
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>
|
