You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<div class="towerSide">
|
|
<el-tree
|
|
:data="data"
|
|
:expand-on-click-node="false"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
default-expand-all
|
|
highlight-current
|
|
node-key="id"
|
|
:default-expanded-keys="expandDefault"
|
|
></el-tree>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import bus from "../../../../../components/common/bus";
|
|
//import { getListCompany } from '@/utils/api/index';
|
|
export default {
|
|
data() {
|
|
return {
|
|
expandDefault: [], //默认选中第一项
|
|
data: [],
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "text",
|
|
},
|
|
};
|
|
},
|
|
// 为了选中第一层级下的第一个节点
|
|
watch: {
|
|
expandDefault(newVal, oldVal) {
|
|
if (newVal) {
|
|
this.$nextTick(() => {
|
|
document.querySelector(".el-tree-node__content").click();
|
|
});
|
|
}
|
|
},
|
|
},
|
|
|
|
created() {
|
|
// getListCompany({
|
|
// companyId: 'f7d966d1-f3d1-4802-946d-ad93e1ee1b9b',
|
|
// lineName: ''
|
|
// }).then((res) => {
|
|
// //console.log(res.data);
|
|
// this.expandDefault.push(res.data.$treeNodeId);
|
|
// this.data = res.data;
|
|
// });
|
|
},
|
|
methods: {
|
|
handleNodeClick(data) {
|
|
//console.log(data);
|
|
bus.$emit("nodeData", data);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.towerSide {
|
|
width: 234px;
|
|
height: 100%;
|
|
border-right: 1px solid @border-color-base;
|
|
// 修改选中的样式
|
|
.el-tree {
|
|
.el-tree-node__content {
|
|
height: 32px;
|
|
}
|
|
}
|
|
.el-tree--highlight-current
|
|
.el-tree-node.is-current
|
|
> .el-tree-node__content {
|
|
background-color: @color-primary;
|
|
color: @color-white;
|
|
}
|
|
}
|
|
</style>
|