【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起-Toy模板网

这篇具有很好参考价值的文章主要介绍了【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起

问题：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;
  },
},

至此问题解决

效果【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起

完整代码

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>