本文介绍如何在Element UI的Select组件中实现多选及全选功能。通过监听数据变化，利用watch观察列表更新，并在methods中处理change事件。核心逻辑包括定义selectAll标识位，在changeSelect方法中判断是否包含全选选项，从而动态过滤或重置选中值，确保权限或成员选择的准确性。
使用组件
<el-col :span="12">
<el-form-item label="成员" prop="person">
<el-select v-model="temp.person" multiple filterable placeholder="请选择" @change="changeSelect">
<el-option label="全部" value="selectAll"/>
<el-option v-for="item in options" :key="item.id" :label="item.realname" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>需要监听数据变化
watch: {
partyOrganizations: {
immediate: true,
handler(val) {
this.getPartyList({ organizationId: val })
}
}
},在return中定义默认值
selectAll: false // 用于标识是否全选--默认不全选执行累加数据和赋值操作
getPartyList(data) {
fetchList(data).then(response => {
this.options = response.data.data
})
},
changeSelect(value) {
// selectAll 为true 的时候，就走全选分支，全选后出现的情况就是取消权限
if (this.selectAll) {
this.selectAll = false
if (value.indexOf('selectAll') > -1) {
this.options = value.filter(p => p !== 'selectAll')
} else {
this.selectValue = []
}
} else {
// 是否点击了‘全选'选项
if (value.indexOf('selectAll') > -1) {
if (this.temp.person.length > 1) {
// 有‘全选'选项，则将‘全部'和其他值放置一块
const optionsValue = []
this.options.forEach(item => {
optionsValue.push(item)
})
optionsValue.forEach(i => {
this.temp.person.push(i.id)
})
this.temp.person = [...new Set(this.temp.person)]
this.selectAll = false
} else {
// 有‘全选'选项，则将‘全部'和其他值放置一块
const optionsValue = []
this.options.forEach(item => {
optionsValue.push(item)
})
const optionsNew = []
optionsValue.forEach(i => {
optionsNew.push(i.id)
})
this.temp.person = [...optionsNew]
this.selectAll = false
}
} else {
// 若是勾选选择的长度和提供的选项长度是一样的，则是 ‘全选'
if (value.length === this.options.length) {
const optionsValue = []
this.options.forEach(item => {
optionsValue.push(item)
})
const optionsNew = []
optionsValue.forEach(i => {
optionsNew.push(i.id)
})
this.temp.person = [...optionsNew]
this.selectAll = false
} else {
// 都是单选
this.temp.person = value
}
}
}
this.selectAll = false
// // 真实的勾选值
// const realSelect = this.temp.person.filter(item => item != 'selectAll')
// const qc = [...new Set(realSelect)]
}
关于Element UI的Select实现多选添加的文章介绍完毕，更多相关Element UI的Select多选添加内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！