vue中使用vant实现上拉刷新下拉加载（二）（六种数据来回切换）

先上图

下面上传代码：

首先html部分

        <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
          <van-list
            v-model="isUpLoading"
            :finished="upFinished"
            @load="onUpRefreshLoad"
            offset="20"
            :finished-text="textUpFinish"
          >
            // idxTabFirst=0  金额
            <div v-if=" idxTabFirst == 0">
            // <card-info>是我自己封装的显示数据项的组件
              <card-info
                v-for="(item, index) in dataList "
                :key="getListKeyValue(index)"
                :obj="item"
              ></card-info>
            </div>
            // idxTabFirst= 1  客户
            <div v-if=" idxTabFirst == 1">
              <card-info
                v-for="(item, index) in dataList"
                :key="getListKeyValue(index)"
                :obj="item"
              ></card-info>
            </div>
            // idxTabFirst= 2  订单
            <div v-if=" idxTabFirst == 2">
              <card-info v-for="(item,index) in dataList" :key="getListKeyValue(index)" :obj="item" :mtype="itemType"></card-info>
            </div>
          </van-list>
        </van-pull-refresh>

所涉及的变量：

      // 一级tab的名称
      arrTabFirst: [
        {
    name: "金额", key: 0, title: "总金额（CNY）" },
        {
    name: "客户", key: 1, title: "总客户（CSR）" },
        {
    name: