1.效果
2.实现
<template>
<div class="board-column kanban todo" style="min-height:0;">
<div class="board-column-header" style="background:#8bd4e0;">人员
<el-select v-model="choosePerson" multiple collapse-tags placeholder="请选择" style="width: 75%;border-radius: 20px;" @change='selectAll'>
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectOptions: [
{ value: 'ALL_SELECT', label: 'ALL' },
{ value: '1', label: 'liablePerson1' },
{ value: '2', label: 'liablePerson2' },
{ value: '3', label: 'liablePerson3' },
{ value: '4', label: 'liablePerson4' },
{ value: '5', label: 'liablePerson5' }
],
oldOptions: [],
choosePerson: []
}
},
methods: {
selectAll(val) {
const allValues = []
// 保留所有值
for (const item of this.selectOptions) {
allValues.push(item.value)
}
// 用来储存上一次的值，可以进行对比
const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []
console.log(this.oldOptions.length)
console.log(val)
console.log(oldVal)
console.log(val.includes('ALL_SELECT'))
console.log(oldVal.includes('ALL_SELECT'))
// 若是全部选择
if (val.includes('ALL_SELECT')) this.choosePerson = allValues
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.choosePerson = []
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
const index = val.indexOf('ALL_SELECT')
val.splice(index, 1) // 排除全选选项
this.choosePerson = val
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
console.log(11)
if (val.length === allValues.length - 1) this.choosePerson = ['ALL_SELECT'].concat(val)
}
// 储存当前最后的结果 作为下次的老数据
this.oldOptions[0] = this.choosePerson
}
}
}
</script>
关于vue框架之el-select的全选的实现，记录下来以便学习
参考1：https://www.cnblogs.com/sinosaurus/p/9047395.html
参考2：http://element.eleme.io/#/zh-CN/component/select