怎么使用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實現多選添加功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。