JS实现全选，取消全选，正常选择

最新推荐文章于 2022-10-17 16:59:31 发布

awolave1230

最新推荐文章于 2022-10-17 16:59:31 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/zppsakura/p/11376780.html

版权

本文详细介绍了在Vue框架中实现全选与取消全选功能的具体代码逻辑，包括如何更新用户ID列表、昵称显示及选择状态。通过遍历选项并根据条件更新界面显示，确保了用户体验的流畅性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//点击选择方法
onUserIdsChange(selVal) {
if (this.form.groupUserIds.includes(-1) && !this.isSelectAll) {
// 全选
this.nickNames = []
this.isSelectAll = true
this.form.groupUserIds = []
this.groupUserOption.forEach(item => {
item.value != -1 && this.form.groupUserIds.push(item.value)
if(this.form.groupUserIds.length !== 0 && item.subscribe !== true){
this.onShow = true
this.nickNames.push(item.label)
}
})
this.groupUserOption[0].label = '取消全选'

    } else if (this.isSelectAll && this.form.groupUserIds.includes(-1)) {
     **// 取消全选**
      this.isSelectAll = false
      this.groupUserOption[0].label = '全选'
      this.form.groupUserIds = []
      this.onShow = false
      this.nickNames = []
    } else {
      **// 正常选择**
      this.nickNames = []
      this.form.groupUserIds = selVal
      if(this.form.groupUserIds.length === this.groupUserOption.length - 1){
        this.groupUserOption[0].label = '取消全选'
      }else{
        this.groupUserOption[0].label = '全选'
      }
      if(this.form.groupUserIds.length !== 0){
       this.groupUserOption.forEach(item2 => {
         this.form.groupUserIds.forEach(item => {
           if(item2.value === item && item2.subscribe !== true){
            this.onShow = true
            this.nickNames.push(item2.label)
          }else if(item2.value === item && item2.subscribe === true){
            this.onShow = false
          }
         })
       })
      }
      else{
        this.onShow = false
        this.nickNames = []
      }
    }
  }
},

转载于:https://www.cnblogs.com/zppsakura/p/11376780.html