删除数据与全选

删除数据

1. 给按钮绑定事件

2. 根据元素的下标进行删除

全选

1. 有全选的样式 复选框

2. 全选框和下边的框状态保持一致 当状态为true那么就是全部选中，为false时就是取消选中

3. 给全选框绑定改变事件

    <!-- 给全选框双向绑定状态 给全选框绑定事件 @click点击事件有延迟,换成改变事件@change-->
    <th>全选<input type="checkbox" v-model="selectall" @change="all"></th>

4. 通过事件来控制状态一致

    all(){
                // 实现全选的效果:让全选框的状态和下边单个框的状态保持一致
                for(var i=0;i<this.selectsingle.length;i++){
                    // 将全选框的状态赋值给单个的框  变量名 = 值
                    // 单个框 = 全选框的
                    this.selectsingle[i] = this.selectall
                }
            }

5. 单独框全部选中全选框也选中

   • 给单独的复选框绑定事件

   • 得到单个的复选框选中的个数

   • 如果选中的个数和数组的长度相同那么说明全部选中了

   • 否则没全部选中

      single(){
           // 实现功能 得到选中框的个数
           // 定义个数的初始值
           var count = 0;
           // 状态为true就是被选中
            for(var i=0;i<this.selectsingle.length;i++){
              // 如果状态为true
                  if(this.selectsingle[i] == true){
                     // 个数加1
                      count++;
                      }
                  }
              // 如果选中的个数和selectsingle的长度相同那么说明全选中了全选框也要选中
                  if(count == this.selectsingle.length){
                      // 全选框的状态也为true
                      this.selectall = true
                  }else{
                      this.selectall = false
                  }
              }
          },