uniapp---多选框功能

//多选

        
          
             
                                
            
            //其他代码可以根据位置书写
          


//全选

              


//data数据
 data() {
      return {
        details: [], 
        checkboxValue: [], //多选框值
        allChecked: false, //是否全选
      }
  },

 //多选事件
checkboxChange(item) {
        this.checkboxValue = item.detail.value
        if (this.checkboxValue.length > 0 && this.checkboxValue.length == this.details.length) {  //判断选中长度和你的内容长度是否一致,如果一致更改全选状态
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      },
      // 全选事件
      allChoose(item) {
        let choose = item.detail.value;
        // 全选
        if (choose[0] == '1') {
          this.allChecked = true;
          for (let res of this.details) {
            let res = item.id;
            if (!this.checkboxValue.includes(res)) {
              this.checkboxValue.push(res);
            }
          }
        } else {
          // 取消全选
          this.allChecked = false;
          this.checkboxValue = [];
        }
      },

你可能感兴趣的:(uni-app,java,服务器)