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实战教程》

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

(0)

相关推荐

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • vue checkbox 全选 数据的绑定及获取和计算方法

    html <input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll"> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span clas

  • 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"> &

  • GridView中加上CheckBox 的全选功能的代码

    首先我們當然是要先做出一個有資料的GridViewGridView做好後,我們在後方新增一個樣板欄位(TemplateField)請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox 复制代码 代码如下: <asp:TemplateField>                          <HeaderTemplate>                              <

  • RecyclerView中使用CheckBox出现勾选混乱的解决方法

    熟悉RecyclerView的人应该都知道,RecyclerView使用了复用机制,当在RecyclerView中得每一项都添加一个CheckBox时,勾选当前页面的几个CheckBox会发现下面还有其他的CheckBox也被勾选了,今天我们就来讨论一下如何解决这个问题. 首先当然是创建一个项目,然后在activity_main中添加一个RecyclerView控件,当然,在这之前,我们需要先添加RecyclerView的依赖,如下图: 然后 开始编辑activity_main: <?xml v

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

  • jquery实现全选功能效果的实现代码

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type=&qu

  • Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • .net开发中批量删除记录时实现全选功能的具体方法

    1 . JS实现全选 往页面上拖一个GridView,设置好数据源,并为GridView添加一个模板列,往模板列里添加一个chekcbox,比如下面的代码 复制代码 代码如下: <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"    DataSourceID="SqlD

随机推荐