VUE中,el-lect选择器多选下拉框实现全选功能和取消全选VUE中,el-lect选择器多选下拉框实现全选功能和取消全选
场景
elementUI的下拉框⽀持多选，但是不⽀持全选，但需求就要这个功能
解决思路
⽅法⼀：下拉项增加⼀个【全选】
应该有以下⼏种情况：
下拉选项全都勾选时，【全选】⾃动勾选；
下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
下拉选项全都未勾选时，点击【全选】后，所有下拉选项全部勾选；
下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；
实例1
环卫工作总结html
<template>
八六子秦观<el-lect multiple collap-tags v-model='lectedArray'@change='changeSelect'@remove-tag='removeTag'placeholder='请选择'> <el-option label='全选'value='全选'@click.native='lectAll'></el-option>
<el-option v-for='(item, index) in options':key='index':label='item.name':value='item.name'></el-option>
</el-lect>
</template>
js
9英文lectedArray:[],
options:[
{ name:'⼀⼀', label:'one'},
滚轧机{ name:'⼆⼆', label:'tow'},
{ name:'三三', label:'three'},
{ name:'四四', label:'four'},
{ name:'五五', label:'five'}
]
}
小动物的家图片
},
methods:{
lectAll(){
if(this.lectedArray.length <this.options.length){
this.lectedArray =[]
this.options.map((item)=>{
this.lectedArray.push(item.name)
})
this.lectedArray.unshift('全选')
}el{
this.lectedArray =[]
}
},
changeSelect(val){
if(!val.includes('全选')&& val.length ===this.options.length){
this.lectedArray.unshift('全选')
}el if(val.includes('全选')&&(val.length -1)<this.options.length){
this.lectedArray =this.lectedArray.filter((item)=>{
return item !=='全选'
})
}
},
removeTag(val){
if(val ==='全选'){
this.lectedArray =[]
}
}
}
}
效果图
⽅法⼆：直接添加⼀个【全选】复选框
实现的功能跟⽅法⼀是⼀样的
html
<template>
<el-lect multiple collap-tags v-model='lectedArray'@change='changeSelect'placeholder='请选择'> <el-checkbox v-model="checked"@change='lectAll'>全选</el-checkbox>
<el-option v-for='(item, index) in options':key='index':label='item.name':value='item.name'></el-option> </el-lect>
</template>
js
checked:fal,毕设开题报告
lectedArray:[],
options:[
{ name:'⼀⼀', label:'one'},
{ name:'⼆⼆', label:'tow'},
多媒体技术与应用{ name:'三三', label:'three'},
{ name:'四四', label:'four'},
{ name:'五五', label:'five'}
]
}
},
methods:{
lectAll(){
this.lectedArray =[]
if(this.checked){
this.options.map((item)=>{
this.lectedArray.push(item.name)
})
}el{
this.lectedArray =[]
}
书卷多情似故人晨昏忧乐每相亲
},
changeSelect(val){
if(val.length ===this.options.length){
this.checked =true
}el{
this.checked =fal
}
}
}
}
css
.el-checkbox{
text-align: right;
width: 100%;
padding-right: 10px;
}
效果图
