效果:
html代码
<el-form-item label="树型结构" > <el-select v-model="treeData" placeholder="请选择..." style="width: 16rem" > <el-option :value="treeDataValue" style="height: auto" > <el-tree ref="tree" :data="data" default-expand-all node-key="id" :props="defaultProps" @node-click="handleNodeClick" /> </el-option> </el-select> </el-form-item>
js代码
<script> export default { data() { return { treeData: "", treeDataValue: "", data: [ { id: 1, name: "一级 1", children: [ { id: 4, label: "二级 1-1", }, ], }, { id: 2, name: "一级 2", children: [ { id: 5, name: "二级 2-1", }, { id: 6, name: "二级 2-2", }, ], }, { id: 3, name: "一级 3", children: [ { id: 7, name: "二级 3-1", }, { id: 8, name: "二级 3-2", }, ], }, ], defaultProps: { children: "children", label: "name", }, }; }, methods: {
handNodeClick(data,node,nodeData){
this.treeDataValue= data
this.treeData= data.name
}
},
};
</script>>