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>>
