1, FIG effect:
2, the introduction means, configure attributes
<el-select
v-model="mineStatus" //这里显示下拉选择时对应的节点信息
placeholder="请选择"
clearable //可以清除当前信息
>
<el-option :value="treedata1" > //下拉数据
<el-tree
:data="treedata1" //树形结构数据来源,从后端接口传过来的数据
accordion //每次只打开一个数的节点
node-key="updateform.ID_K"
ref="updatetree"
highlight-current //当前选择高亮显示
:props="defaultProps"
@check-change="handleCheckChange" //选择不同节点时会触发
check-on-click-node //点击节点即选中节点
>
</el-tree>
</el-option>
</el-select>
3, definition data, the configuration here is the property tree assembly props
data() {
return {
defaultProps: {
children: "children",
label: "text"
},
mineStatus: "",
};
},
4, the data transfer properties of the component assembly from the parent over, but can not be modified directly computed using the following process
props: {
["treedata"]: Array,
}
5, the tree data
computed: {
treedata1() {
return this.treedata;
}
}
6, when selecting the current node, elselect component displays the selected node information
handleCheckChange() {
let res = this.$refs.tree.getCurrentNode();
this.mineStatus = [res][0].text;
}