• 注册
    • 查看作者
    • vue使用vant中的checkbox实现全选功能

       

      这篇文章主要为大家详细介绍了vue使用vant中的checkbox实现全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下

      <template>
      <div class=”visiblePeople”>
      <topbar />
      <ul class=”list clear_float”>
      <li v-for=”(item, index) in people” :key=”index”>
      <van-checkbox
      v-model=”item.flag”
      class=”listli”
      ></van-checkbox>
      <div class=”right”>
      <p>{{ item.name }}</p>
      <p>{{ item.id }}</p>
      </div>
      </li>
      </ul>
      <div class=”bottom”>
      <div class=”left”>
      <van-checkbox v-model=”allcheck” class=”all”>全选</van-checkbox>
      </div>
      <button @click=”jump”>确定</button>
      </div>
      </div>
      </template>

      <script>
      export default {
      data() {
      return {
      people: [
      { id: “002”, name: “陈阳”, flag: true },
      {
      id: “003”,
      name: “王苗苗”,
      flag: true,
      },
      {
      id: “004”,
      name: “张梁俊”,
      flag: true,
      },
      {
      id: “005”,
      name: “刘路”,
      flag: true,
      },
      ],
      };
      },
      methods: {
      //点击确定后跳转回新增合同页面
      jump() {
      this.$router.push(“/addContract”);
      },
      //单选按钮切换
      // change(index) {
      // this.people[index].flag = !this.people[index].flag;
      // console.log(this.people[index].flag);
      // },
      },
      computed:{
      allcheck:{
      get(){
      //取值
      //every方法,数组中每一项都满足一个条件返回true
      return this.people.every(item=>item.flag)
      },
      set(newValue){
      //设置值
      console.log(‘触发set方法’)
      this.people.map(item=>item.flag=newValue)
      }
      },
      filterAll(){
      return this.people.filter(item=>item.flag).length
      },
      count(){
      let checkedList=this.people.filter(item=>item.flag)
      return checkedList.length.reduce((total,item)=>{
      return total+item.num
      },0)
      }
      }
      };
      </script>
      <style lang=”less” scoped>
      .list {
      background: #f8f9fb;
      height: 574px;
      li {
      height: 56px;
      margin: 10px 0 10px 0;
      float: left;
      img {
      width: 19px;
      height: 19px;
      float: left;
      margin: 13px;
      &.on {
      display: block;
      }
      &.off {
      display: none;
      }
      }
      .listli {
      float: left;
      margin: 19px 13px 0 13px;
      }
      .right {
      float: left;
      background: #ffffff;
      width: 328px;
      height: 56px;
      padding: 0px 0 0 13px;
      box-sizing: border-box;
      p:nth-of-type(1) {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 29px;
      }
      p:nth-of-type(2) {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 14px;
      }
      }
      }
      }
      .bottom {
      height: 50px;
      position: fixed;
      bottom: 0;
      .left {
      width: 237px;
      background: #ffffff;
      height: 100%;
      float: left;
      img {
      width: 18px;
      float: left;
      margin: 18px 13px 0 18px;
      &.on {
      display: block;
      }
      &.off {
      display: none;
      }
      }
      .all {
      margin: 17px 0 0 14px;
      }
      p {
      float: left;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-top: 18px;
      }
      }
      button {
      float: left;
      width: 138px;
      height: 50px;
      line-height: 50px;
      background: #336afa;
      color: #ffffff;
      }
      }
      </style>

      本次遇到的问题是自己一开始没发现在people数组里面,定义的每一项flag的值设置的类型为字符串型即flag=”true”,导致一开始进入页面全部无论值为true还是false,复选框都是选中效果,修改之后便没有了此问题。

      关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

      更多vue学习教程请阅读专题《vue实战教程》

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

      来源:脚本之家

      链接:https://www.jb51.net/article/199892.htm

      ,。,!

    • 0
    • 0
    • 0
    • 2
    • 请登录之后再进行评论

      登录
    • 单栏布局 侧栏位置: