效果:
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>>