<template>
|
<div class="aside">
|
<div class="title">组织机构</div>
|
<div class="input">
|
<el-input placeholder="输入组织机构名称" v-model="searchArea"></el-input>
|
</div>
|
<div class="menu">
|
<el-tree :data="areaData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
</div>
|
</div>
|
</template>
|
<script>
|
|
export default {
|
data() {
|
return {
|
searchArea: null,
|
areaData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
}
|
};
|
},
|
|
created() {
|
},
|
|
methods: {
|
handleNodeClick(data) {
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.aside {
|
width: 200px;
|
height: calc(100vh - 102px);
|
background-color: #09152f;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
.title {
|
line-height: 60px;
|
}
|
|
.input {
|
line-height: 30px;
|
|
&::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
}
|
|
.menu {
|
margin-top: 20px;
|
flex: 1;
|
.el-tree{
|
height: 100%;
|
background-color: #09152f;
|
&::v-deep .el-tree-node:focus>.el-tree-node__content{
|
background-color: #092c4a;
|
}
|
&::v-deep .el-tree-node__content:hover{
|
background-color: #092c4a;
|
}
|
}
|
}
|
}
|
</style>
|
