vue + element 树形选择框（单选框）实现

最新推荐文章于 2025-09-22 18:00:01 发布

原创最新推荐文章于 2025-09-22 18:00:01 发布 · 2.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #html #elementui #javascript

本文介绍如何使用Vue和Element UI组件构建一个树形选择框，通过结合el-popover和el-tree，实现单选框的多选功能，同时隐藏了传统el-select的下拉菜单。

在这里插入图片描述
多选框实现：https://blog.csdn.net/qq_39417037/article/details/120525968
vue + element 树形选择框（多选框）实现

<!-- vue + element 树形选择框（单选框）实现 -->
<!-- 思路：隐藏el-select的下拉框，改用el-popover弹出框和el-tree控件组合-->
<template>
  <div class="main-container">
    <span style="font-size: 16px">类型:</span>
    <el-popover
      v-model="popoverVisible"
      placement="bottom"
      width="200"
      trigger="click"> <!-- click:点击select时弹出框显示 -->
      <!-- popover+tree用于选择，树形控件放在弹出框中 -->
      <el-tree :data="typeOptions" :props="defaultProps" @node-click="handleNodeClick"/>
      <!-- select展示选择结果，储存选择值typeValue -->
      <el-select slot="reference" v-model="typeValue" placeholder="请选择" popper-class="hiddenSel">
        <el-option
          v-for="item in typeOption"
          :key="item.id"
          :label="item.name"
          :value="item.id"/>
      </el-select>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      // 控制popover弹出框是否展示
      popoverVisible: false,
      // tree数据
      typeOptions: [
        {
          id: 0,
          name: '父级1',
          children: [
            {
              id: 1,
              name: '类型1'
            }, {
              id: 2,
              name: '类型2'
            }, {
              id: 3,
              name: '类型3'
            }, {
              id: 4,
              name: '类型4'
            }, {
              id: 5,
              name: '类型5'
            }
          ]
        }, {
          id: 6,
          name: '父级2'
        }
      ],
      // select选择框选项
      typeOption: [
        {
          id: 0,
          name: '父级1'
        },
        {
          id: 1,
          name: '类型1'
        }, {
          id: 2,
          name: '类型2'
        }, {
          id: 3,
          name: '类型3'
        }, {
          id: 4,
          name: '类型4'
        }, {
          id: 5,
          name: '类型5'
        }, {
          id: 6,
          name: '父级2'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // select的值，默认选择第一个父级的第一个值
      typeValue: 1
    }
  },
  created () {},
  computed: {},
  watch: {},
  mounted () {},
  methods: {
    handleNodeClick (data) {
      // 若父级不可选，则在此处判断
      // if (data.id === 0 || data.id === 6) {
      //   return
      // }
      // 点击树形控件选择后，隐藏弹出框
      this.popoverVisible = false
      // 将点击的tree值赋值给select（select中即展示）
      this.typeValue = data.id
    }
  }
}
</script>
<style>
/* 把select的下拉框隐藏 */
.hiddenSel{
  display: none;
}
</style>