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 })
}
}
},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)]
}
到此这篇关于elementui的select实现多选添加的文章就介绍到这了,更多相关elementui的select多选添加内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
