Element-ui中 选择器（select）多选下拉框实现全选功能
需求（产品整活）：
需要下拉时候可以一键全选
父组件运用
<template>
<div>
<MultipleSelect
:filterable="false"
:selectOptions="selectOptions" //数据集合
:mulSelectLoading="mulSelectLoading" //是否显示loading
:mulSelecteds="mulSelecteds"// 绑定的值
labels="schoolName" //自定义label参数
values="unitId" //自定义value参数
@update:updateMultipleSelect="val => mulSelecteds = val">
</MultipleSelect>
</div>
</template>
<script>
import MultipleSelect from './MultipleSelect.vue';
export default {
data() {
return {
selectOptions:[],
mulSelectLoading:false,
mulSelecteds:[]
}
},
components:{
MultipleSelect,
},
methods: {
mockData(){
this.mulSelectLoading = true;
// 模拟数据
setTimeout(()=>{
const options = [
{ label: '上海', value: 'sh' },
{ label: '南京', value: 'nj' },
{ label: '重庆', value: 'cq' },
{ label: '武汉', value: 'wh' },
]
this.selectOptions = options;
this.mulSelectLoading = false;
this.mulSelecteds = ['cq','nj'];
},1500)
},
},
mounted(){
this.mockData();
}
}
</script>
子组件
<template>
<el-select
size="mini"
multiple
:filterable="filterable"
:disabled="disabled"
v-model='selectedArr'
:loading="mulSelectLoading"
:collapse-tags="collapseTags"
placeholder='请选择'
@change='changeSelect'
@remove-tag='removeTag'>
<el-option label='全选' value='全选' @click.native='selectAll' v-if="selectOptions.length"></el-option>
<el-option v-for='item in selectOptions' :key="item[values]" :label='item[labels]' :value='item[values]'></el-option>
</el-select>
</template>
<script>
export default {
name: 'MultipleSelect',
data() {
return {
selectedArr: [],
}
},
props:{
//自定义label参数
labels:{
type:String,
default(){
return ''
}
},
//自定义value参数
values:{
type:String,
default(){
return ''
}
},
// 选项
selectOptions:{
type:Array,
default(){
return []
}
},
// 是否禁用
disabled:{
type:Boolean,
default:false
},
// 已选中选项
mulSelecteds:{
type:Array,
default(){
return []
}
},
// 加载状态
mulSelectLoading: {
type: Boolean,
default: false,
},
// 多选时是否将选中值按文字的形式展示
collapseTags: {
type: Boolean,
default: true,
},
// 是否可搜索
filterable: {
type: Boolean,
default: true,
},
},
methods: {
selectAll() {
if (this.selectedArr.length < this.selectOptions.length) {
this.selectedArr = []
this.selectOptions.map((item) => {
this.selectedArr.push(item.[this.values])
})
this.selectedArr.unshift('全选');
} else {
// 取消全选
this.selectedArr = [];
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
},
changeSelect(val) {
if (!val.includes('全选') && val.length === this.selectOptions.length) {
this.selectedArr.unshift('全选')
} else if (val.includes('全选') && (val.length - 1) < this.selectOptions.length) {
this.selectedArr = this.selectedArr.filter((item) => { return item !== '全选'})
}
this.$emit('update:updateMultipleSelect',this.selectedArr);
},
removeTag(val) {
if (val === '全选') {
this.selectedArr = [];
this.$emit('update:updateMultipleSelect',this.selectedArr);
}
}
},
watch:{
mulSelecteds:{
handler(newVal,oldVal){
this.selectedArr = newVal;
if (!this.selectedArr.includes('全选') &&
this.selectedArr.length &&
this.selectedArr.length === this.selectOptions.length)
{
this.selectedArr.unshift('全选')
}
},
immediate: true
}
}
}
</script>