[JavaScript知识库]vue实现下拉复选框全选与全不选

  <el-select multiple collapse-tags v-model="searchForm.auditResult" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择">
	 <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
     <el-option v-for="(item, index) in auditResultData" :key="item.value" :label="item.label" :value="item.value">
	    <span class="check"></span>
	    <span style="margin-left: 8px">{{ item.label }}</span>
	</el-option>
	</el-select>

     //选中数据
	  searchForm: {
	      auditResult: []
	  },
      下拉框数据
       auditResultData: [
           { label: '全部' value: '0' },
           { label:'有违规', value: '1' },
           { label:'无违规', value: '2' }
       ],

  // 思路：第一次点击全选，全选数组没有数据，而下拉框数组有数据，因此会走进判断并且向全选数组中添加所有的数据，都会被选中
   selectAll() {
        if (this.searchForm.auditResult.length < this.auditResultData.length) {
            this.searchForm.auditResult = [];
            this.auditResultData.map(item => {
                this.searchForm.auditResult.push(item.value);
            });
        } else {  //再次点击全选清空选中数据
            this.searchForm.auditResult = [];
        }
    },
    //可要可不要
    changeSelect(val) {
        this.searchForm.auditResult = this.searchForm.auditResult.filter(item => {
            return item;
        });
    },
    //点击input输入框删除选中数据
    removeTag(val) {
        this.searchForm.auditResult = [];
    },