el-select 下拉全选反选
<template>
<div class="configure">
<el-select
v-model="orgData"
size="small"
multiple
collapse-tags
@change="selectAll"
@remove-tag="removeTag">
<el-option
v-for="item in webAddresses"
:key="item.orgId"
:label="item.orgName"
:value="item.orgId" />
</el-select>
</div>
</template>
<script>
export default {
name: 'configure.veu',
data() {
return {
webAddresses: [
{
orgId: '全选',
orgName: '全选'
}, {
orgId: '选项0',
orgName: '全部'
},
{
orgId: '选项1',
orgName: '黄金糕'
},
],// 遍历的select option 从后端遍历
newOrgData: [], // 勾选改变产生的旧数据
orgData: [],//勾选最终数据
}
},
methods: {
// 多选模式下移除tag时触发,val为移除的tag值
removeTag(val) {
console.log(val,'----------')
if (val === '全选') {
this.orgData = []
}
},
selectAll(val) {
var end = val[val.length - 1]
console.log('111===', this.orgData, val, this.newOrgData, end)
//全选数据再反选使所有清空
if (this.newOrgData.includes('全选') && !val.includes('全选') && val.length + 1 === this.webAddresses.length) {
val = []
this.orgData = []
}
//当所有数据都选择了使勾选上【全选】
if (!val.includes('全选') && val.length + 1 === this.webAddresses.length) {
val.unshift('全选') //在val开头插入【全选】
} else if (val.includes('全选') && val.length === 1) { //直接勾选【全选】
val = []
this.webAddresses.map(item => {
val.push(item.orgId)
})
} else if (val.includes('全选') && val.length - 1 < this.webAddresses.length && end === '全选') {
//点击选择其他元素后再选择【全选】
val = []
this.webAddresses.map(item => {
val.push(item.orgId)
})
} else if (val.includes('全选') && val.length - 1 < this.webAddresses.length) {
//全选后再点击取消掉其他元素
val = val.filter(item => {
return item !== '全选'
})
}
// 注意,加上 this.value = val,确保勾选值同步
this.orgData = val
this.newOrgData = val
},
}
}
</script>