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