Vue+Vant制作单选全选全不选以及删除按钮van-checkbox

在官网上看到vant组件特别好用，就尝试使用checkbox制作单选全选，由于是下午头脑不清楚所以没想通思路，导致了一部分的错误，经过我的老大指点，才想通如此简单的思路，就是都亮和都不亮的区别。

全选全不选

1. 引入组件

import Vue from ‘vue’;
import { Checkbox, CheckboxGroup } from ‘vant’;
Vue.use(Checkbox).use(CheckboxGroup);

2. 基础用法

	通过v-model绑定 checkbox 的勾选状态
	复选框
	export default {
	 data() {
	 return {
  	checked: true
	  };
	  }
	};

3. 做出的效果：全选全亮；取消全选全部不亮；单选时全选不亮。

4. 基础代码如下：

删除功能

包括了调用接口的删除，在文中会注明的。

<template>
  <div>
    <div>我是关注店铺</div>
    <div class="lyy-bg">
      <div class="lyy-hei"></div>
      <div class="lyy-neia lyy-gs1" v-for="(items,index) in list" :key="index">
        <!-- @click="handleShopSelect1()" -->
        <!-- :value="items.id" -->
        <van-checkbox
          style="padding:0px 5px 0px 0px"
          v-show="isShow"
          v-model="items.checked"
          @change="choose"
          checked-color="#07c160"
        ></van-checkbox>
        <div class="lyy-nei">
          <div class="lyy-gs">
            <div class="lyy-gs1">
              <div class="lyy-tu">
                <img :src="items.shop_logo" width="68px" height="68px" />
              </div>
              <div class="lyy-jl">
                <div class="lyy-word">{{items.shop_name}}</div>
                <div class="lyy-word2">
                  <span>
                    <img src="@/img/xing.png" width="12px" height="11px" />
                  </span>
                  <span>{{items.num}}</span>人已关注
                </div>
              </div>
              <div class="lyy-word3">进店逛逛 ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 全选管理按钮 -->
      <div class="lyy-qx lyy-gs1" v-show="isShow">
        <div>
          <van-checkbox
            class="lyy-qx2"
            v-model="checked"
            checked-color="#07c160"
            @click="allCheck"
          >全选</van-checkbox>
          <!-- @click="handleShopSelect" -->
        </div>
        <div class="lyy-del" @click="deleteData">删除</div>
      </div>
      <div class="lyy-gl" @click="toggle()">
        <div class="lyy-gl2">
          <div class="lyy-gl3">
            <img src="@/img/zfx2.png" width="28px" height="28px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false, //全选
      isShow: false,
	//测试数据
      list: [
        {
          id: "1",
          shop_name: "若萱旗舰店",
          num: 5,
          shop_logo: require("@/img/tu.png"),
          checked: false
        },
        {
          id: "2",
          shop_name: "小白旗舰店",
          num: 2,
          shop_logo: require("@/img/tu.png"),
          checked: false
        }
      ]
    };
  },
  created() {
    this.followData();
    this.addData();
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    //全选
    allCheck() {
      let a = !this.checked;
      this.list = this.list.map(e => {
        e.checked = a;
        return e;
      });
    },

    //单选
    choose() {
      let a = true;
      this.list.forEach(e => {
        if (e.checked === false) {
          a = false;
        }
      });
      this.checked = a;
    },

    //删除

    deleteData() {
      let arr = [];

      // var len = this.list.length;
      this.list.forEach(e => {
        e.checked ? 0 : arr.push(e);
      });

      this.list = arr;
    },
    followData() {//这里是接口的调用
      // this.$http
      //   .get("/apis/Member/concern", {
      //     params: {
      //       uid: 10
      //     }
      //   })
      //   .then(res => {
      //     console.log(res);
      //     this.list = res.data.data.map(e => {
      //       e.checked = false;
      //       return e;
      //     });
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    addData() {
      let _self = this;
      let data = {
        shop_id: 9,
        uid: 10
      };
      _self.$http
        .get("/apis/Member/followShop", {
          //关注店铺的
          params: data
        })
        .then(res => {
          console.log(res);
          res = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
    

  }
};
</script>

<style scoped>
.lyy-bg {
  background-color: #f8f6f6;
}
.lyy-hei {
  height: 5px;
}
.lyy-nei {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.lyy-neia {
  padding: 0px 0px 5px 0px;
  margin: 0px 9px 0px 9px;
}
.lyy-tu {
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 1);
  border: 0px solid rgba(238, 238, 238, 1);
}
.lyy-gs {
  padding: 17px 0px 16px 18px;
  flex-direction: row;
}
.lyy-gs1 {
  display: flex;
  justify-content: space-between;
}
.lyy-word {
  font-size: 12px;
  font-family: "PingFang SC";
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  padding: 0px 0px 16px 0px;
}
.lyy-word2 {
  font-size: 13px;
  font-family: "Adobe Heiti Std";
  font-weight: normal;
  color: #999999;
}
.lyy-word3 {
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(114, 117, 115, 1);
  line-height: 18px;
  padding: 15px 13px 0px 0px;
}
.lyy-jl {
  padding: 0px 40px 0px 16px;
}
.lyy-gl {
  /* width: 64px;
  height: 25px;
  border-radius: 60px; */
  /* background-color: #6fb22f; */
  /* color: white; */
  /* text-align: center; */
  position: fixed;
  bottom: 4rem;
  right: 1.5rem;
}
.lyy-gl2 {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background-color: #030303;
}
.lyy-gl3 {
  padding:6px 8px;
}
.lyy-qx {
  /* width: 320px; */
  height: 51px;
  width: 100%;
  position: fixed;
  bottom: 0rem;
  /* right: 0.5rem; */
  background: white;
}
.lyy-del {
  width: 65px;
  height: 26px;
  border-radius: 13px;
  background: rgba(241, 13, 59, 1);
  color: white;
  text-align: center;
  position: relative;
  top: 10px;
  right: 10px;
  line-height: 24px;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.lyy-qx2 {
  position: relative;
  top: 10px;
  left: 10px;
}
</style>

效果如下：

如果有不懂的小伙伴欢迎留言或者私信我，最近跟着做Vue的项目自己菜鸡一个还是需要各路大神来指点一下滴。