el-select实现全选功能

xfq_z

已于 2023-06-16 15:04:46 修改

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js elementui javascript

于 2023-06-16 15:01:44 首次发布

本文链接：https://blog.csdn.net/weiliang_66/article/details/131247236

该代码示例展示了如何在Vue.js应用中使用el-select组件实现多选功能，并添加“全部”选项。当用户选择“全部”时，会自动取消其他选项的选择，反之亦然，确保了多选选项与“全部”选项的互斥。通过监听selectedOptions的变化，动态调整选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：1、下拉选项增加全部，value为其余选项value的值用逗号拼接

2、处理多选情况其他选项与全部选项的互斥功能

<template>
  <div>
    <el-select  v-model="selectedOptions" :multiple="multipleType" @change="selectedChange">
      <!-- <el-checkbox v-show="!selectAll" class="all-sele" v-model="selectAll" @change="toggleSelectAll">全部</el-checkbox> -->
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
/* eslint-disable */ 
export default {
  data() {
    return {
      // selectAll: false,
      multipleType:true,
      selectedOptions: [],
      options: [
        { label: '全部', value: '1,2,3' },
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
      ],
    };
  },

  computed: {
  },
  created(){

  },
  watch: { },
  methods: {
    selectedChange(val) {
      if(!this.multipleType){
        return false
      }
      let curData=this.options.find(a=>a.label=='全部')
      if(val.length>1&&val.includes(curData.value)){
        let allIndex=val.findIndex(a=>a==curData.value)
        if(allIndex==0){
          this.selectedOptions.splice(0,1)
        }else{
          this.selectedOptions=[curData.value]
        }
      }else if(val.join(',')==curData.value){
        this.selectedOptions=[curData.value]
      }
    }
    
  },
};
</script>
<style lang="less"  scoped>
.all-sele /deep/ .el-checkbox__input{
  opacity: 0;
}
</style>