<template>
<div class="Wrapper">
<div class="equipmentWra">
<div class="equipment">
<div class="font">设备选择</div>
<el-select size="small" v-model="form.treeData" multiple placeholder="请选择" style="width: 250px">
<el-option :value="treeDataValue" style="height: auto;font-weight: 400">
<el-tree
ref="tree"
:data="devTrees"
show-checkbox
default-expand-all
node-key="id"
:props="defaultProps"
@check-change="handleNodeClick"
/>
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
loading: false,
form: {
treeData: [],
},
treeDataValue: "",
devTrees: [],
defaultProps: {
children: "children",
label: "label",
}
}
},
mounted() {
},
methods: {
handleNodeClick(data, node, nodeData){
this.treeDataValue = data
let num = 0;
this.form.treeData.forEach(item => {
item === data.label ? num++ : num;
});
if(num === 0) {
this.form.treeData.push(data.label)
}
},
devTree() {
devRunAnalysis.devTree().then(res => {
this.devTrees = res.data;
});
}
}
};
</script>
<style scoped lang="scss">
.Wrapper {
background: white;
padding: 20px 50px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.equipmentWra {
display: flex;
.equipment {
display: flex;
margin-right: 20px;
.font {
line-height: 40px;
font-weight: bold;
margin-right: 20px;
}
}
}
</style>