vue+vant实现全选、单选、下拉加载功能

通过 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);
      });
    },
  },
};

效果图