前言
问题:
elementui 的 select 下拉框 搭配 树形菜单 tree 点击菜单 值虽然变化了,但select下拉框没收起
vue代码
<!--
* @Description: select下拉搭配tree树形 选择
-->
<template>
<div class="selectTree">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="树型结构">
<!-- 单选 -->
<el-select
v-model="form.treeData"
placeholder="请选择"
style="width: 16rem"
>
<!-- 多选 -->
<!-- <el-select v-model="form.treeData" multiple 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>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
treeData: "一级 1", // 单选
// treeData: [], // 多选
},
treeDataValue: "1",
data: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
name: "一级 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",
},
};
},
created() {},
methods: {
// 点击树节点
handleNodeClick(data, node, nodeData) {
// select 单选
this.treeDataValue = data;
this.form.treeData = data.name;
console.log(data);
console.log(node.parent.data);
console.log(nodeData);
// select 多选(判重后添加到选择结果数组中)
// this.treeDataValue = data
// let num = 0;
// this.form.treeData.forEach(item => {
// item == data.name ? num++ : num;
// })
// if(num == 0) {
// this.form.treeData.push(data.name)
// }
},
},
};
</script>
<style lang="scss">
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
background-color: #ffffff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #ffffff;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
</style>
解决
1.给下拉框写个ref
即
<el-select
v-model="form.treeData"
placeholder="请选择"
style="width: 16rem"
ref="treeSelect"
>
<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>
2.点击下拉框选项的时候判断值有没有赋值(即这个select下拉框的值有没有改变),写个监听,值改变了就收起树形菜单。
我这里是把下拉框显示的值
给treeDataValue
,就写个watch监听它。
watch: {
treeDataValue() {
this.$refs.treeSelect.visible = false;
},
},
至此问题解决
效果
完整代码
vue文件
<!--
* @Description: select下拉搭配tree树形 选择
-->
<template>
<div class="selectTree">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="树型结构">
<!-- 单选 -->
<el-select
v-model="form.treeData"
placeholder="请选择"
style="width: 16rem"
ref="treeSelect"
>
<!-- 多选 -->
<!-- <el-select v-model="form.treeData" multiple 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>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
treeData: "一级 1", // 单选
// treeData: [], // 多选
},
treeDataValue: "1",
data: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
name: "一级 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",
},
};
},
created() {},
watch: {
treeDataValue() {
this.$refs.treeSelect.visible = false;
},
},
methods: {
// 点击树节点
handleNodeClick(data, node, nodeData) {
// select 单选
this.treeDataValue = data;
this.form.treeData = data.name;
console.log(data);
console.log(node.parent.data);
console.log(nodeData);
// select 多选(判重后添加到选择结果数组中)
// this.treeDataValue = data
// let num = 0;
// this.form.treeData.forEach(item => {
// item == data.name ? num++ : num;
// })
// if(num == 0) {
// this.form.treeData.push(data.name)
// }
},
},
};
</script>
<style lang="scss">
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
background-color: #ffffff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #ffffff;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
</style>
下班~