前言

問題：elementui 的 select 下拉框 搭配 樹形菜單 tree 點(diǎn)擊菜單 值雖然變化了，但select下拉框沒收起

vue代碼

<!--
 * @Description: select下拉搭配tree樹形 選擇
-->
<template>
  <div class="selectTree">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="樹型結(jié)構(gòu)">
        <!-- 單選 -->
        <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: {
    // 點(diǎn)擊樹節(jié)點(diǎn)
    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 多選（判重后添加到選擇結(jié)果數(shù)組中）
      // 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.給下拉框?qū)憘€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.點(diǎn)擊下拉框選項(xiàng)的時(shí)候判斷值有沒有賦值（即這個select下拉框的值有沒有改變），寫個監(jiān)聽，值改變了就收起樹形菜單。

我這里是把下拉框顯示的值給treeDataValue，就寫個watch監(jiān)聽它。

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="樹型結(jié)構(gòu)">
        <!-- 單選 -->
        <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: {
    // 點(diǎn)擊樹節(jié)點(diǎn)
    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 多選（判重后添加到選擇結(jié)果數(shù)組中）
      // 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>

下班~文章來源地址http://www.zghlxwxcb.cn/news/detail-502809.html

到了這里，關(guān)于【UI】 elementUI的select-tree組合下拉框，選擇后下拉框不收起的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！