elementui的select实现多选添加功能
作者:你邻座的怪同学
这篇文章主要介绍了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 }) } } },
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多选添加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!