这一篇在上文的基础上继续添加另一种全选的方法
总体方法类似
这里直接上效果
初始默认全选
上代码
html
<el-form-item label="可全选下拉框2" prop="apply2">
<el-select multiple collapse-tags v-model="ruleForm.apply2" @change="changeSelectApp(ruleForm.apply2,appOptions)" @remove-tag="removeTagApp(ruleForm.apply2,appOptions)" placeholder="请选择应用" style="width:100%">
<el-option label="全部" value="allSelect" @click.native="doSelecAllApp(ruleForm.apply2,appOptions)"></el-option>
<el-option
v-for="(item, index) in appOptions"
:label="item.label"
:value="item.code"
:key="index"
/>
</el-select>
</el-form-item>
初值
appOptions: [
{ code: 'No1', value: '01' },
{ code: 'No2', value: '02' },
{ code: 'No3', value: '03' },
{ code: 'No4', value: '04' },
{ code: 'No5', value: '05' }
],
ruleForm: {
apply2: [],
}
js
这里的方法我封了一层公共方法,为的是可以多次调用
/** 切换全选状态 */
changeSelect2 (valArr, options) {
console.log(valArr, 'value11')
console.log(options, 'options')
if (!valArr.includes('allSelect') && valArr.length === options.length) {
valArr.unshift('allSelect')
} else if (valArr.includes('allSelect') && (valArr.length - 1) < options.length) {
valArr = valArr.filter(item => {
return item !== 'allSelect'
})
}
return valArr
},
/** 移除tag */
removeTag (valArr, options) {
// console.log(valArr, '移除')
// if (valArr === 'allSelect') {
// valArr = []
// }
// return valArr
},
/** 具体方法 */
/** 获取所有select的全选 */
getAllSelect () {
this.doSelecAllApp(this.ruleForm.apply2, this.appOptions)
},
changeSelectApp (valArr, options) {
this.ruleForm.apply2 = this.changeSelect2(valArr, options)
},
doSelecAllApp (valArr, options) {
this.ruleForm.apply2 = this.doSelecAll2(valArr, options)
},
removeTagApp (valArr, options) {
this.ruleForm.apply2 = this.removeTag(valArr, options)
}
这里的getAllSelect方法是为了方便直接调用了doSelecAllApp方法,为了在初始时是“全部”的状态(mounted调用,这里省了)