vue+vant实现全选、单选、下拉加载功能
通过 vant 的 Checkbox 来进行列表数据的选择,需求单选、多选、下拉加载、最多选中功能了解:Checkbox 可搭配 CheckboxGroup 进行选中和非选中状态切换使用到的参数 max(最大可选)、@change(当绑定值变化时触发)van-list 无限加载功能未选中按钮置灰,选中按钮可点击触发事件html<template><div class="advan
·
通过 vant 的 Checkbox 来进行列表数据的选择,需求单选、多选、下拉加载、最多选中功能
了解:
- Checkbox 可搭配 CheckboxGroup 进行选中和非选中状态切换
- 使用到的参数 max(最大可选)、@change(当绑定值变化时触发)
- van-list 无限加载功能
- 未选中按钮置灰,选中按钮可点击触发事件
html
<template>
<div class="advance">
<div class="item-box">
<van-checkbox-group
v-model="result"
ref="checkboxGroup"
@change="thechangCheck"
:max="10"
>
<van-list
v-model="loadings"
:finished="finisheds"
finished-text="没有更多了"
@load="onLoads"
>
<div v-for="(item, index) in this.dataList" :key="index">
<van-checkbox :name="item">
<div class="items">
<div class="items-lf">
<div class="lf-text">
<div>交易收款</div>
<div>{{ item.counterPartiesName }}</div>
</div>
<div class="lf-time">
<div>结算日期:</div>
<div>{{ item.settlementDate }}</div>
</div>
</div>
<div class="items-rg">
<div class="rg-num">
+<span>{{ item.amount }}</span>
</div>
<div class="rg-type">{{ item.settleStatusText }}</div>
</div>
</div>
</van-checkbox>
</div>
</van-list>
</van-checkbox-group>
</div>
<div class="hintbox">
<div class="top-text">
<div class="texts">
提现金额:<span>¥</span><span>{{ this.priceNum }}</span>
</div>
<div class="texts">
手续费:<span>¥</span><span>{{ this.feeNum }}</span>
</div>
</div>
</div>
<div class="foot">
<div>
<van-checkbox v-model="checkAllFlag" @change="theAllCheck"
>全选</van-checkbox
>
</div>
<div
@click="theOpenText"
class="foot-rg"
:class="this.result.length === 0 ? 'bg_gray' : ''"
>
提前收款
</div>
</div>
</div>
</template>
js
// 按需引用组件
import {
Checkbox, CheckboxGroup, list,
} from "vant";
export default {
components: {
[Checkbox.name]: Checkbox,
[CheckboxGroup.name]: CheckboxGroup,
[list.name]: list,
},
data() {
return {
// check选中数据
result: [],
// 第几页
pageNum: 1,
// 总页数
endAllNum: 0,
// 获取数据
dataList: [],
// 最大选择
splicList: [],
// 全选
checkAllFlag: false,
// list加载
loadings: false,
finisheds: false,
// 手续费
feeNum: "0.00",
// 金额
priceNum: "0.00",
};
},
created() {
this.getTypePwd();
this.getAllData();
},
methods: {
// 获取列表数据
getAllData() {
// 调用接口数据展示并分页
this.$store.dispatch("balance/getSettlementList").then((data) => {
if (data !== undefined) {
// 数据分页及全选数据取前十
this.endAllNum = Math.ceil(data.totalNum / 10);
this.splicList = this.dataList.slice(0, 10);
}
});
},
// 单选
thechangCheck() {
this.getpriceNum();
// 当全选的数据有改变全选按钮取消选中
if (this.result.length !== this.splicList.length) {
this.checkAllFlag = false;
}
},
// 全选
theAllCheck(val) {
if (val) {
// map遍历展示选中最大选中数
this.result = [];
this.result = this.splicList.map((item) => item);
} else {
// 防止有一条数据取消选中后所有数据全部取消选中
if (this.result.length === this.splicList.length) {
this.checkAllFlag = false;
this.result = [];
}
}
this.getpriceNum();
},
// 下拉加载
onLoads() {
setTimeout(() => {
if (this.pageNum >= this.endAllNum) {
this.finisheds = true;
} else {
this.pageNum += 1;
this.getAllData();
}
this.loadings = false;
}, 1000);
},
// 计算价格
getpriceNum() {
if (this.result.length === 0) {
this.feeNum = "0.00";
this.priceNum = "0.00";
}
let zong = 0;
this.result.forEach((item) => {
zong += item.amount * 1;
this.priceNum = zong.toFixed(2);
});
let shou = 0;
this.result.forEach((item) => {
shou += item.forwardFee * 1;
this.feeNum = shou.toFixed(2);
});
},
},
};
效果图
更多推荐
已为社区贡献2条内容
所有评论(0)