vue复选框多选、全选

 

 <div class="center">
            <p style="text-align: center;margin-top: 5px;">需提供资料</p>
            <div class="center-top">
            <div class="center-left">
              <p style="padding-top: 3px"><span style="float: left">
                <input type="checkbox" class="checkbox" v-if="materialData.length!==0" @change="checkAll($event)">
                <input type="checkbox" v-else class="checkbox" :checked="xuanze1" disabled>
                </input>
                <span v-show="page1Num">{{pNum1}}项</span><span v-show="page1Num2">{{num1}}/{{pNum1}}项</span></span><span style="float: right;padding-right: 10px">P2</span></p>
              <ul class="ul">
                <li v-for="item in materialData"><input type="checkbox" class="checkbox"  :value="item.num" v-model="checkData" @change="checkt($event)"></input>{{item.name}}<span style="float: right;margin-right: 20px" @click="Delete(item.id)"><Icon type="ios-trash-outline"></Icon></span></li>
                <li style="text-align: center;color: #3190e8;cursor: pointer" @click="add">新增选项</li>
              </ul>
            </div>
            <div class="center-center">
              <button @click="rightClick($event)"><img style="width: 25px;height: 20px;" src="../../../assets/right.png"/></button>
              <button @click="leftClick($event)"><img style="width: 20px;height: 20px;" src="../../../assets/left.png"/></button>
            </div>
            <div class="center-right">
              <p style="padding-top: 3px"><span style="float: left"><input type="checkbox" class="checkbox"  v-if="materialData1.length!==0" @change="checkAll1($event)" ></input><input type="checkbox" v-else class="checkbox" :checked="xuanze1" disabled></input>
                <span v-show="pageNum">{{pNum}}项</span><span v-show="pageNum2">{{num}}/{{pNum}}项</span></span><span style="float: right;padding-right: 10px">P1</span></p>
              <ul class="ul">
                <li v-for="item in materialData1"><input type="checkbox" class="checkbox1" :value="item.num" v-model="checkData1" @change="checkt1($event)"></input><span v-model="form.applyMaterialNum">{{item.name}}</span></li>
              </ul>
            </div>
            </div>
              <textarea class="center-textarea" placeholder="产品描述" v-model="form.productDescription"></textarea>
          </div>

 全选的实现

 data(){
        return{
          checkData:[];
          pNum1=0
          page1Num:true,
          page1Num2:false,
          num:0,
          num1:0,
      },
checkAll(e) { // 点击全选事件函数
          var checkObj = document.querySelectorAll('.checkbox'); // 获取所有checkbox项
          if (e.target.checked) { // 判定全选checkbox的勾选状态
            for (var i = 0; i < checkObj.length; i++) {
              if (!checkObj[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
                this.checkData.push(checkObj[i].value);
              }
              this.num1 = this.pNum1
              this.page1Num = false
              this.page1Num2 = true
            }
          } else { // 如果是去掉全选则清空checkbox选项绑定数组
            this.checkData = [];
            this.num1 = 0
            this.page1Num = true
            this.page1Num2 = false
          }
        },
 checkt(e) {
          if (e.target.checked) { // 判定checkbox的勾选状态
            this.page1Num = false
            this.page1Num2 = true
            this.num1++
          } else {
            this.num1--
          }
        },

因为要显示多少项，所以加了好几个全局变量（看着这代码真的感觉自己特别菜）

我要实现的功能是用户把想要的资料勾选后，添加到左边，所以我要获取的是左边的id值和name值(不是下标)，当点击移动到右边的按钮时就添加进新的数组materialData1并删除materialData数组用户勾选的数据 ，移动到左边则相反

rightClick() {
          var checkData = this.checkData
          var materialData = this.materialData;
          var materialData1 = this.materialData1;
          for (var i = 0; i < this.checkData.length; i++) {
            checkData.forEach(function (item, index) {
              materialData.forEach(function (ajax1, i) {
                if (ajax1.num == item) {
                  materialData1.push({num:item,name:ajax1.name});
                  materialData.splice(i, 1);
                }
              });
            })
            this.pNum1-= this.num1
            this.num1-=this.num1
            this.materialData = materialData;
            this.materialData1 = materialData1;
            this.checkData = []
            this.pNum = materialData1.length
          }
          if(this.materialData.length==0){
            this.pNum1 =0
            this.page1Num=true
            this.page1Num2=false
          }
        },
leftClick(){
          var checkData1 = this.checkData1
          var materialData = this.materialData;
          var materialData1 = this.materialData1;
          for (var i = 0; i < this.checkData1.length; i++) {
            checkData1.forEach(function (item, index) {
              materialData1.forEach(function (ajax1, i) {
                if (ajax1.num == item) {
                  materialData.push({num:item,name:ajax1.name});
                  materialData1.splice(i, 1);
                }
              });
            })
            this.pNum -= this.num
            this.num -= this.num
            this.materialData = materialData;
            this.materialData1 = materialData1;
            this.checkData1 = []
            this.pNum1 = materialData.length
          }
          if(this.materialData1.length==0){
            this.pNum =0
            this.page1Num=true
            this.page1Num2=false
          }
        },

写完之后发现很简单，但当时我写的时候困扰我的就是移动过去要获取它的id和name，还要删除这边？，我一直想着要怎么才能让值与之对应，因为值一直对应不了，下标是知道怎么获取，但它的id和name我该怎么对应，所以困扰了我很久，真的是脑子都浆糊了感觉。因为接口需要的值是资料的id,百度了好久才知道用forEach，才突然开窍。所以这又是一个新知识，之前只是听过但从来没用过，不过感觉代码似乎还是有点多，希望能有更简便的方法。欢迎交流！