下拉列表改成树形结构,点击哪个节点,就选中哪个节点,效果如图:
代码:
<el-select
v-model="name"
placeholder="请选择"
clearable
@clear="handleClear"
>
<el-option :value="list" class="select-tree">
<el-tree
:data="list"
highlight-current
check-on-click-node
default-expand-all
:props="{
label: 'name',
children: 'childList'
}"
@node-click="handleCheck"
/>
</el-option>
</el-select>
export default {
data() {
return {
name: '',
code: ''
list: [],
}
},
methods: {
// 点击节点
handleCheck: function(val) {
this.name = val.name
this.code = val.code
},
// 清空
handleClear: function(val) {
if (!val || val === '') {
this.code = ''
}
},
}
}