怎么使用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实现多选添加功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。