70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-04-06 19:33:11
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2021-04-26 13:56:33
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-tree :data="dataList" :props="defaultProps" @node-click="handleNodeClick" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
menuList: {
|
|
type: Array,
|
|
default: () => {
|
|
[]
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
dataList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.dataList.splice(0, this.dataList.length)
|
|
this.menuList.forEach(item => {
|
|
if (item.parentId === '-1') {
|
|
this.dataList.push(item)
|
|
} else {
|
|
this.append(item)
|
|
}
|
|
})
|
|
},
|
|
append(child) {
|
|
this.menuList.forEach(item => {
|
|
if (child.parentId === item.id) {
|
|
if (!item.children) {
|
|
this.$set(item, 'children', [])
|
|
}
|
|
item.children.push(child)
|
|
}
|
|
})
|
|
},
|
|
handleNodeClick(data) {
|
|
this.$emit('getOrganization', data)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-tree >>> .el-tree-node__label {
|
|
font-size: 20px;
|
|
}
|
|
.el-tree >>> .el-tree-node__expand-icon {
|
|
font-size: 20px;
|
|
}
|
|
</style>
|