elementUI的下拉框支持多选(multiple),但是不支持全选
<el-form-item label='Type:'>
<el-select collapse-tags v-model="value" placeholder="Nothing Selected" :multiple=true @change='changeSelect' @remove-tag='removeTag'>
<el-option label='全选' value='全选' @click.native='selectAll'></el-option>
//如果是普通的html,使用@click就可以触发。如果使用组件和路由,在router-link标签中就需要使用@click.native。不然就只会跳转而不会触发事件。
<el-option v-for="(item,index) in dataArray" :key="index" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<script>
export default {
data() {
return {
dataArray:['Bugzi','CQ-SPC', 'U-Clearca','SVN','Li','Mu'],
value:[],
}
}
methods {
// 下拉框全选功能
selectAll(){
if (this.value.length<this.dataArray.length){
this.value = []
this.dataArray.map((item)=> {
this.value.push(item)
})
this.value.unshift('全选')
}else {
this.value=[]
}
},
changeSelect(val){
if (!val.includes('全选') && val.length === this.options.length){
this.value.unshift('全选')
}
else if(val.includes('全选') && (val.length-1) < this.dataArray.length){
this.value = this.value.filter((item)=>{
return item !== '全选'
})
}
},
removeTag(val){
if(val==='全选'){
this.value=[]
}
},
}
}
效果展示
collapse-tags
解决 Element-UI el-select多选以collapse-tags展示时,超过显示长度溢出的问题
在select中添加collapse-tags后