elementui的select实现多选添加功能

select组件

监听数据变化

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多选添加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！