Vue 开发中如何实现多选下拉框？Element UI 组件库 Select 来帮忙

你知道么？Vue中的下拉菜单只能选一个选项太限制了。今天咱们就来学学怎么做出能选多个的vue下拉菜单！而且还会具体实例展示！

一、用ElementUI，简单快捷

首先，你得先了解下ElementUI这个玩意儿。这才是真正牛逼的Vue插件，啥都能干。举个例子，比如Select那跨组件的功能，真是太实用了。加个multiple属性，立马变多选！

讲真的，代码就这么回事儿。你只要把想要选的东西扔到数组里，再加个multiple属性就行。这样子，想怎么选就怎么选，多省事儿！

二、自己动手，丰衣足食

没事儿，没ElementUI照样做出多选题下拉框。真不难的，动手做就能学会~

比如，咱们用一个Array记下用户选好的选项。用户想看哪个就点，这个界面上就会显示或者隐藏对应的正方形。然后再按一下就能知道他们到底选了啥。这样的话，我们就能随心所欲地设定多选模式。要是用户想把之前选过的删掉，那咱们也能加个清空功能！

三、结合实际需求，灵活调整

真的，想咋办就咋办，有时候想要搜索功能的下拉菜单，但有时又喜欢分类列出。你说东，它绝不往西，这小玩意儿可乖了！

data() {
  return {
    options: [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ],
    selectedOptions: []
  };
}

加个搜索框在网页上找东西不是挺方便的？或者再整理一下选项，也能让人更容易找到。想到就赶紧试试看！

四、注意细节，提升用户体验

挑选东西加点小心思，用户体验肯定更棒比如提示你选啦什么，或者给你个清空按钮，之前挑好的一秒就消~

赶紧选，别选太多了，不然容易卡哟。试试把看到的换成虚拟列表，这样就会顺畅多了！

五、总结与展望

  

    

      请选择...
      
        
          {{ option.label }}
          ✖
        
      
    
    

      
        
        {{ option.label }}
      
    
  


export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: [],
      showDropdown: false
    };
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    toggleOption(option) {
      if (this.isSelected(option)) {
        this.removeOption(option);
      } else {
        this.addOption(option);
      }
    },
    isSelected(option) {
      return this.selectedOptions.some(selectedOption => selectedOption.value === option.value);
    },
    addOption(option) {
      if (!this.isSelected(option)) {
        this.selectedOptions.push(option);
      }
    },
    removeOption(option) {
      this.selectedOptions = this.selectedOptions.filter(selectedOption => selectedOption.value !== option.value);
    },
    isChecked(option) {
      return this.isSelected(option);
    }
  }
};


.dropdown {
  position: relative;
  display: inline-block;
}
.selected-options {
  border: 1px solid #aaa;
  padding: 5px;
  cursor: pointer;
}
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #aaa;
  background-color: #fff;
  padding: 5px;
}
.remove {
  margin-left: 5px;
  cursor: pointer;
}

跟你说件事如果要在Vue上搞个下拉多选框，建议用ElementUI的Select组件。当然了，你要是有实力，自己弄个新的也挺好的！但是记得，一定要看好细节，针对实际需求去调整，这样才能让用户觉得好用！

Vue以后会更强，华丽丽的组件库肯定也越来越多，咱们就方便！不过得抓紧时间学习练习，提高自己才能赢！

大家有没有碰到过那种让人哭笑不得的需求呀？你们是咋解决的？快跟咱们说说呗！