需求：选择数据，并且计算选中数据。当选中后面的时候，前面制自动选择，当取消选中的时候，不能从中间选择，只能从最后开始取消。比如缴费，第一年、第二年、第三年等，不能跳过前面的直接缴费第3年。
一、数据处理
1、服务端数据
一般为数组，数组里面是一个个json。
遍历数据，向数据里面添加新属性，代码如下
data.forEach((item,index)=>{
data[index].checked=false;//对每一条数据添加是否选中属性
data[index].disabled=false;//对每一条数据添加是否无效属性
})
2、前端写死数据
类似下图。
数据json
二、全选
1、html代码
<checkbox-group @change.stop.prevent="checkboxChange" class="group">
<view class="popup_main" v-for="(yearfees,index) in Invention" :key="index">
<label class="label">
<checkbox :value="String(index)" color="#f27a46" :checked="yearfees.checked" :disabled="yearfees.disabled"/>
</label>
<view>
<text>第{{yearfees.year}}年 {{yearfees.money}}元</text>
<text style="color: red;"></text>
<text style="color: red;" v-if="patent.mitigationratio"></text>
</view>
</view>
</checkbox-group>
<checkbox-group @change.stop.prevent="all">//当点击按钮时，触发all方法
<view class="popup_main">
<label class="label">
<checkbox color="#f27a46" :value="allpd" :checked="checked"/>
</label>
<view class="popup_main_b">
<text>全选 </text>
</view>
</view>
</checkbox-group>
2、js代码
// 全选
all(e){
this.Invention.forEach((item,index)=>{
console.log(item);
if(item.year>=this.yearprice){//计算选了几项
// allmoney2+=item.money;
this.num++;
console.log(this.num);
}
})
let index=e.detail.value;
this.allmoney=0;
this.num=0;
let allmoney2=0;
if(index=='1'){//当选择时，判断是否全选
this.Invention.forEach((item,index)=>{
this.Invention[index].disabled=true;//设置无效，关联属性:disabled="yearfees.disabled"
this.Invention[index].checked=true;//设置全选，关联属性:checked="yearfees.checked"
console.log(item);
})
this.allmoney=allmoney2+this.Latefee;
}else{
this.Invention[index].disabled=false;//设置有效
this.Invention[index].checked=false;//取消全选
}
},
三、选择一项，默认选择前面所有，及前面失效
代码如下：
checkboxChange(e){
let index=e.detail.value;
let indx2=[];
console.log(index[index.length-1]);//取选择数据数组最后一个，选择框vue为第几条数据
this.Invention.forEach((item,num)=>{//遍历循环所有数据
// debugger;
if(num<=index[index.length-1]){//遍历的数据小于选择的这一项
this.Invention[num].checked=true;
if(num!=0){
this.Invention[num-1].disabled=true;
}
indx2.push(num);
}else{
this.Invention[num].checked=false;
if(num!=0){
this.Invention[num-1].disabled=false;
}
}
})
},
四、完整代码
由于代码是从项目上摘取，使用时可适当修改
<template>
<view>
<uniPopup ref="popup" type="bottom">
<view class="popup_min">
<view class="popup_top">
<text>请选择缴纳年份</text>
<!-- <text>X</text> -->
</view>
<checkbox-group @change.stop.prevent="checkboxChange" class="group">
<view class="popup_main" v-for="(yearfees,index) in Invention" :key="index" v-if="index>=yearprice-1">
<label class="label">
<checkbox :value="String(index)" color="#f27a46" :checked="yearfees.checked" :disabled="yearfees.disabled"/>
</label>
<view>
<text>第{{yearfees.year}}年 {{yearfees.money}}元</text>
</view>
</view>
</checkbox-group>
<checkbox-group @change.stop.prevent="all">
<view class="popup_main">
<label class="label">
<checkbox color="#f27a46" :value="allpd" :checked="checked"/>
</label>
<view class="popup_main_b">
<text>全选 </text>
</view>
</view>
</checkbox-group>
</view>
</uniPopup>
</view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue"
export default{
data(){
return{
// 发明专利
Invention:[
{
year:1,
money:905,
checked:false,
disabled:false,
},{
year:2,
money:905,
checked:false,
disabled:false,
},{
year:3,
money:905,
checked:false,
disabled:false,
},{
year:4,
money:1205,
checked:false,
disabled:false,
},{
year:5,
money:1205,
checked:false,
disabled:false,
},{
year:6,
money:1205,
checked:false,
disabled:false,
},{
year:7,
money:2005,
checked:false,
disabled:false,
},{
year:8,
money:2005,
checked:false,
disabled:false,
},{
year:9,
money:2005,
checked:false,
disabled:false,
},{
year:10,
money:4005,
checked:false,
disabled:false,
},{
year:11,
money:4005,
checked:false,
disabled:false,
},{
year:12,
money:4005,
checked:false,
disabled:false,
},{
year:13,
money:6005,
checked:false,
disabled:false,
},{
year:14,
money:6005,
checked:false,
disabled:false,
},{
year:15,
money:6005,
checked:false,
disabled:false,
},{
year:16,
money:8005,
checked:false,
disabled:false,
},{
year:17,
money:8005,
checked:false,
disabled:false,
},{
year:18,
money:8005,
checked:false,
disabled:false,
},{
year:19,
money:8005,
checked:false,
disabled:false,
},{
year:20,
money:8005,
checked:false,
disabled:false,
}
]
},
components: {
uniPopup
},
created(){
this.getCustInfo();
this.getmationdeller();
},
mounted(){
// this.AnnualFee();
},
onLoad(e) {
this.patentNo=e.patentNo;
this.monitorId=e.id;
// this.updateRemind();
},
methods:{
open(){
this.$refs.popup.open();
},
checkboxChange(e){
let index=e.detail.value;
let indx2=[];
console.log(index[index.length-1]);
this.Invention.forEach((item,num)=>{
// debugger;
if(num<=index[index.length-1]){
this.Invention[num].checked=true;
if(num!=0){
this.Invention[num-1].disabled=true;
}
indx2.push(num);
}else{
this.Invention[num].checked=false;
if(num!=0){
this.Invention[num-1].disabled=false;
}
}
})
}
},
// 全选
all(e){
this.Invention.forEach((item,index)=>{
console.log(item);
if(item.year>=this.yearprice){//计算选了几项
// allmoney2+=item.money;
this.num++;
console.log(this.num);
}
})
let index=e.detail.value;
this.allmoney=0;
this.num=0;
let allmoney2=0;
if(index=='1'){//当选择时，判断是否全选
this.Invention.forEach((item,index)=>{
this.Invention[index].disabled=true;//设置无效，关联属性:disabled="yearfees.disabled"
this.Invention[index].checked=true;//设置全选，关联属性:checked="yearfees.checked"
console.log(item);
})
}else{
this.Invention[index].disabled=false;//设置有效
this.Invention[index].checked=false;//取消全选
}
},
},
}
</script>
网友评论