el-select全选反选功能

最新推荐文章于 2025-01-06 18:13:24 发布

原创最新推荐文章于 2025-01-06 18:13:24 发布 · 516 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #elementui

<template>
  <el-select v-model="selectedOptions" multiple @change="changeAll" style="width:100%">
    <el-checkbox v-model="checkedAll" @change="selectAll" style="margin-left:10px">全选</el-checkbox>
    <el-checkbox v-model="checkedReverse" @change="reverseSelect">反选</el-checkbox>
    <el-option v-for="option in options" :key="option.id" :label="option.name" :value="option.name"></el-option>
  </el-select>
</template>

<script>
export default {
    data(){
        return{
            options: [{
          id: '选项1',
          name: '黄金糕'
        }, {
          id: '选项2',
          name: '双皮奶'
        }, {
          id: '选项3',
          name: '蚵仔煎'
        }, {
          id: '选项4',
          name: '龙须面'
        }, {
          id: '选项5',
          name: '北京烤鸭'
        }],
        checkedAll:false,
        checkedReverse:false,
        selectedOptions:[]
        }
    },
    methods:{
        selectAll(){
            if (this.checkedAll) {
                this.checkedReverse=false;
                this.selectedOptions=this.options.map(option=>option.name)
            }else{
              this.selectedOptions=[]  
            }
        },
        changeAll(){
            if (this.selectedOptions.length==this.options.length) {
                this.checkedAll=true
            }else{
                this.checkedAll=false
            };
            if (this.checkedReverse) {
                this.checkedReverse=false
            }
        },
        reverseSelect(){
            this.selectedOptions=this.options.filter((option)=>!this.selectedOptions.includes(option.name))
            .map((option)=>option.name);
            if (this.selectedOptions.length==this.options.length) {
                this.checkedAll=true
            }else{
                this.checkedAll=false
            }
        }
    }
}
</script>

<style>

</style>