el-select 下拉框全选、多选的几种方式组件_el-select全选

    })
    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 = []
  }
}

}
}

**效果图二、**  
![](https://img-blog.csdnimg.cn/a930a05d7bde4a258e7a6ef2282ede8c.png)


**代码：**  
 直接添加一个【全选】复选框，实现的功能跟方法一是一样的  
  

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;
}

**效果图三、**


![](https://img-blog.csdnimg.cn/f9d1862419b743b88255b17ee3ec3887.png)


**下拉框和全选都加上 checkbox，选择框 el-select 全选 多选， el-option与el-checkbox的组合使用**


**需要注意的事项：**


**1. el-select与el-checkbox-group的v-model 绑定的值，需相同，绑定同一个变量  
 2. el-option的value与el-checkbox的label绑定的值也需要相同  
 3. el-checkbox 需要使用 style=“pointer-events: none”， 是为了去掉鼠标事件，阻止事件冒泡，触发了两次el-select的change事件**


  
**代码如下:**

<el-select
v-model=“lineNumStage”
v-bind=“$attrs”
multiple
style=“width: 100%;”
placeholder=“请选择线路”
@change=“handleSelect”
>

<el-checkbox v-model=“isCheckAll” :indeterminate=“isIndeterminate” @change=“handleCheckAllChange”>全选

{{ item.label }}

checkAll: false, // 是否全选
isIndeterminate: false, //全选复选框标识
options: [
{ name: ‘京广高速’, value: ‘京广高速’ },
{ name: ‘京包客专’, value: ‘京包客专’ },
{ name: ‘京哈高速’, value: ‘京哈高速’ },
{ name: ‘崇礼线’, value: ‘崇礼线’ },
{ name: ‘京秦高铁’, value: ‘京秦高铁’ },
{ name: ‘京沪高铁’, value: ‘京沪高铁’ },
{ name: ‘京津城际’, value: ‘京津城际’ },
],
biddingStage: [],

// 下拉框选择事件
handleSelect(value) {
const checkedCount = value.length;
this.checkAll = checkedCount === this.options.length;
this.isIndeterminate = checkedCount > 0 && c

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

heckedCount < this.options.length;
},
// 全选事件
handleCheckAllChange(val) {
const data = this.options.map(item => {
return item.value
})
this.biddingStage = val ? data : [];
this.isIndeterminate = false;
},

**注:**  **如果需要把右边的√去掉，el-select加上class和popper-append-to-body=false属性，然后css修改** 

/deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
display: none;
}

**效果图四、 全选全部选中的时候，下拉框的文字是全选，后面是 + 12 数量**


![](https://img-blog.csdnimg.cn/f32c16e610094a998397a00c4e5e5d0c.png)


思路：   
 由于添加了：collapse-tags 属性后，全选选中的时候，正常会默认选中第一个label的值显示，后面是 + 全部数量 -1 .  我们可以在初始化的时候，把默认选中的数组里面最前面添加一项“全选”

// 初始化给下拉框选中 的数组赋值

this.biddingStage = [ ‘京广高速’,‘京包客专’, ‘京哈高速’,‘崇礼线’,‘京沪高铁’,‘京津城际’]

this.biddingStage.unshift(‘全选’)

**然后在全选的方法里面**：判断如果是全选就在最前面 添加1项 value 值 ‘全选’

// 全选事件
handleCheckAllChange(val) {
const data = this.options.map(item => {
return item.value
})
// this.biddingStage = val ? data : [];
if (val) {
this.biddingStage = data
this.biddingStage .unshift(‘全选’)
} else {
this.biddingStage = []
}
this.isIndeterminate = false;
},

然后在 下拉框选项改变的时候: 


1. 先用arr1的变量存一下，把下拉框的数组 过滤出不含 全选的，剩余全部数据


2. 用selectArr的变量存一下， value的数组 过滤出不含 全选的，剩余全部数据


然后用新的2个变量去 执行

  const checkedCount = selectArr.length
  this.isCheckAll = checkedCount === arr1.length
  this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length

最后在判断  this.isCheckAll  是否是 true  是的话，就是全选。 在数组最前面添加 1项 value  ’全选‘  
 否则就移除 ’全选‘  
  

  if (this.isCheckAll) {
    console.log('quanxuan')
    this.biddingStage.unshift('全选')
  } else {
    this.biddingStage = this.biddingStage.filter((item) => {
      return item !== '全选'
    })
    console.log(this.biddingStage)
  }

**这部分全部代码如下:**

// 线路下拉框选择事件
handleSelect(value) {
  console.log('value:', value)

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理