VUE中,el-select选择器多选下拉框实现全选功能和取消全选

Select 选择器之elementUI版—— https://element.eleme.cn/#/zh-CN/component/select

Select 选择器之Ant Design of Vue版—— https://www.antdv.com/components/select-cn/

elementUI的下拉框支持多选，但是不支持全选，但需求就要这个功能

方法一：下拉项增加一个【全选】

<template>
    <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder='请选择'>
        <el-option label='全选' value='全选' @click.native='selectAll'></el-option>
        <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
     </el-select>
</template>
export default {
  data() {
    return {
      selectedArray: [],
      options: [
        { name: '一一', label: 'one' },
        { name: '二二', label: 'tow' },
        { name: '三三', label: 'three' },
        { name: '四四', label: 'four' },
        { name: '五五', label: 'five' }
  methods: {
    selectAll() {
      if (this.selectedArray.length < this.options.length) {
        this.selectedArray = []
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        this.selectedArray.unshift('全选')
      } else {
        this.selectedArray = []
    changeSelect(val) {
      if (!val.includes('全选') && val.length === this.options.length) {
        this.selectedArray.unshift('全选')
      } else if (val.includes('全选') && (val.length - 1) < this.options.length) {
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== '全选'
    removeTag(val) {
      if (val === '全选') {
        this.selectedArray = []
方法二：直接添加一个【全选】复选框
 
实现的功能跟方法一是一样的
 
<template>
  <el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder='请选择'>
    <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
    <el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
  </el-select>
</template>
export default {
  data() {
    return {
      checked: false,
      selectedArray: [],
      options: [
        { name: '一一', label: 'one' },
        { name: '二二', label: 'tow' },
        { name: '三三', label: 'three' },
        { name: '四四', label: 'four' },
        { name: '五五', label: 'five' }
  methods: {
    selectAll() {
      this.selectedArray = []
      if (this.checked) {
        this.options.map((item) => {
          this.selectedArray.push(item.name)
      } else {
        this.selectedArray = []
    changeSelect(val) {
      if (val.length === this.options.length) {
        this.checked = true
      } else {
        this.checked = false
.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
                    VUE中,el-select选择器多选下拉框实现全选功能和取消全选Select 选择器之elementUI版——https://element.eleme.cn/#/zh-CN/component/selectSelect 选择器之Ant Design of Vue版——https://www.antdv.com/components/select-cn/场景elementUI的下拉框支持多选，但是不支持全选，但需求就要这个功能解决思路方法一：下拉项增加一个【全选】应该有以下几种情况：下
				
项目需求：由于表单中的一个el-select中的数据过多，下拉框用户体验不好，因此需要做成有懒加载且分页的下拉框。后又因为该功能需要多选，并且打开表单要能够正确回显。这些需求加起来，导致问题变得复杂起来。我在网上也看了许多文章，没有找到好的解决方案。因此我将自己的记录下来，还望各位指点！！！
（本项目请求后端需要传id，page，size，name）(name的格式为JSON形式的[id:1,name:’’],[id:2,name:’’])
1、在需要使用懒加载的el-select加上我们的自定义指令（v-
    <el-form ref="form" label-width="80px" :model="test">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="测试">
            <el..
				
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些
方法一：下拉项增加一个【全选】，然后应该有以下几种情况：
1.下拉选项全都勾选时，【全选】自动勾选；
2.下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
3.下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；
4.下拉选项和【全选】都选上的时候，不勾选任意...
				
最近在弄作品，做了个下拉列表。心想各位小哥哥、小姐姐可能会用到相同的需求，就把下拉列表封装一下，希望能对各位小哥哥，小姐姐有帮助
github地址：
https://github.com/ClmPisces/vue-droplist
喜欢的请反手来个star，有issue的欢迎提出
cnpm install vue-droplist --save
组件中导入
import DropList from 'vue-droplist'
// 显示下拉列表
showDropList() {
// 配置信息
const configData = {
position: { // 设置显示位置
				
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下：
HTML代码：
1.在处理人列加入一个下拉框模板，其中v-model必须要scope.row.proJbruserValue来绑定，意思是这个值绑定到当前行所选中的人；如果直接绑定proJbruserValue，将不能进行差异化选择，(这里scope
				
el-select是Element UI中的一个下拉选择器组件，可以供用户选择单个选项。但是，当我们需要在多选模式下选择所有可选项时，就需要实现"全选"的功能。实现思路如下：
1. 首先，在el-select的数据源中加入一个"全部"选项，并且将该选项的value设置为一个特殊值（比如-1），表示选中全部选项。
2. 增加一个按钮，在用户点击该按钮时，可以将该el-select中除了"全部"以外的所有选项都设置为选中状态，将选中的值存入一个数组中。
3. 当用户改变其它选项的选择状态时，更新这个数组的选项。若用户选中了全部选项，则将选项数组设置为所有的可选值（除了"全部"以外的选项），否则，如果选项数组中已经包含了所有的可选值，则将选择状态设置为"全部"。
4. 最后，使用v-model实现选中值的绑定。
在实现"全选"功能时，需要注意以下两点：
1. 选项数组必须通过Vue响应式的方式来维护。
2. 在更改选项状态时，我们需要使用Vue中的$nextTick方法来确保DOM更新完毕后再处理选项。
                Ajax跨域请求之同源政策、跨域请求 & 实现跨域请求之jsonp原理、jQuery实现跨域请求、CORS跨域 & XML格式-过时 & ajax请求遵循http协议
                    programmer_ada: 
                    AI 写作助手上线啦！限免 4 天，快来创作试试功能吧～https://editor.csdn.net/md/?not_checkout=1&utmsource=blog_comment_recall
                gitlab添加SSH密钥——查看本地密钥 & 生成ssh密钥
                    Imlaity: 
                    有个问题 好像只有在根目录下运行 ssh-keygen 命令
                vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本
                    一只黑熊怪: 
                    太高质量了，爱了
                vue中使用图像编辑器tui-image-editor(三)——示例之详细注释和组件化.md
                    吾疾唯君医: 
                    默认加载的图片不显示
                Turf.js——用于地理空间分析的js库，处理各种地图算法
                    Keep on！: 
                    你好，请问底图用的是什么？