element UI select组件全选
<el-select class="fr" v-model="searchJobType" style="width: 185px; margin-right:8px;" size="mini" type="text" multiple collapse-tags @change="changeSelect" placeholder="请选择类型查询"> <el-option v-for="(type,ind) in typeList" :key=ind :label="type.label" :value="type.value"></el-option> </el-select> var Main = { data() { return { searchJobType: ['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10'], oldSearchJobType: [['ALL_SELECT','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10']], typeList: [ {value: 'ALL_SELECT', label: '全部'}, {value: '00', label: 'label0'}, {value: '01', label: 'label1'}, {value: '02', label: 'label2'}, {value: '03', label: 'label3'}, {value: '04', label: 'label4'}, {value: '05', label: 'label5'}, {value: '06', label: 'label6'}, {value: '07', label: 'label7'}, {value: '08', label: 'label8'}, {value: '09', label: 'label9'}, {value: '10', label: 'label10'}, ] } }, methods:{ changeSelect(val) { const allValues = []; // 保留所有值 for (const item of this.typeList) { allValues.push(item.value) } // 用来储存上一次的值,可以进行对比 const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : []; // 若是全部选择 if (val.includes('ALL_SELECT')) this.searchJobType = allValues; // 取消全部选中 上次有 当前没有 表示取消全选 if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = []; // 点击非全部选中 需要排除全部选中 以及 当前点击的选项 // 新老数据都有全部选中 if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) { const index = val.indexOf('ALL_SELECT'); val.splice(index, 1); // 排除全选选项 this.searchJobType = val } // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选 if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) { if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val) } // 储存当前最后的结果 作为下次的老数据 this.oldSearchJobType[0] = this.searchJobType; }, } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
“如果命运是一条孤独的河流,谁会是你的灵魂摆渡人?”