今天小编给大家分享一下怎么使用elementui的select实现多选添加功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
select组件
计算
安全
数据库
网络和加速
企业服务
<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 })
}
}
}, 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)]
}以上就是“怎么使用elementui的select实现多选添加功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/weixin_45816407/article/details/129563041
