Element-Select选择器结合树形控件
作者:互联网
Element UI中Select选择器的下拉选项是普通的列表,但是有些情况下,需要提供下拉菜单,这时就需要结合Select选择器和树形控件Tree了,其代码如下
<template>
<div class="about">
<!-- 选择器选项以树形控件展示 -->
<el-select v-model="form.id" placeholder="请选择" ref="selectTree">
<el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
<el-tree :data="data"
:props="defaultProps"
node-key="id"
accordion
highlight-current
@node-click="handleNodeClick"/>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
form: {
id: '',
value: ''
}
}
},
methods: {
handleNodeClick (data) {
// console.log(data)
this.form = {
id: data.label,
value: data.label
}
// 使 input 失去焦点,并隐藏下拉框
this.$refs.selectTree.blur()
}
}
}
</script>
最终效果如下所示:
小结:
- 需要提供一个隐藏的option标签:
<el-option :key="form.id" :value="form.id" :label="form.label" hidden/>
- 当点击节点后,需要调用Select选择器的blur方法隐藏下拉框:
this.$refs.selectTree.blur()
标签:控件,label,三级,选择器,Element,data,children,Select 来源: https://www.cnblogs.com/itmacy/p/16266705.html