欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementui的select實(shí)現(xiàn)多選添加功能

 更新時(shí)間:2023年03月22日 11:53:16   作者:你鄰座的怪同學(xué)  
這篇文章主要介紹了elementui的select實(shí)現(xiàn)多選添加功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

select組件

		<el-col :span="12">
          <el-form-item label="成員" prop="person">
            <el-select v-model="temp.person" multiple filterable placeholder="請(qǐng)選擇" @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>

監(jiān)聽數(shù)據(jù)變化

watch: {
    partyOrganizations: {
      immediate: true,
      handler(val) {
        this.getPartyList({ organizationId: val })
      }
    }
  },

return 中的定義默認(rèn)值

      selectAll: false // 用于標(biāo)識(shí)是否全選--默認(rèn)不全選

累加數(shù)據(jù)和賦值

getPartyList(data) {
      fetchList(data).then(response => {
        this.options = response.data.data
      })
    },
    changeSelect(value) {
      //  selectAll 為true 的時(shí)候,就走全選分支,全選后出現(xiàn)的情況就是取消權(quán)限
      if (this.selectAll) {
        this.selectAll = false
        if (value.indexOf('selectAll') > -1) {
          this.options = value.filter(p => p !== 'selectAll')
        } else {
          this.selectValue = []
        }
      } else {
        //   是否點(diǎn)擊了‘全選'選項(xiàng)
        if (value.indexOf('selectAll') > -1) {
          if (this.temp.person.length > 1) {
            // 有‘全選'選項(xiàng),則將‘全部'和其他值放置一塊
            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 {
            // 有‘全選'選項(xiàng),則將‘全部'和其他值放置一塊
            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 {
          // 若是勾選選擇的長(zhǎng)度和提供的選項(xiàng)長(zhǎng)度是一樣的,則是 ‘全選'
          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
      // // 真實(shí)的勾選值
      // const realSelect = this.temp.person.filter(item => item != 'selectAll')
      // const qc = [...new Set(realSelect)]
    }

到此這篇關(guān)于elementui的select實(shí)現(xiàn)多選添加的文章就介紹到這了,更多相關(guān)elementui的select多選添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論