vue，v-for制作滑动翻页table表

vue，v-for制作翻页table表(滑动整张table实现翻页效果)

template代码

// An highlighted block
<div class="chart-bottom">
        <h3 class="title2" :title="title2">{{title2}}</h3>
        <div class="change">
          <a class="left-img" :page='page' @click="changePage(-1)"></a>
          <span>{{page.current}}/{{totalPage}}</span>
          <a class="right-img" :page='page' @click="changePage(1)"></a>
        </div> //翻页按钮
        <div class="table-box">
          <table class="my-table table1">
            <tr>
                <th class="fisrt">
                  <div class='out'>
                    <em class="tr">时间</em>
                    <div class='line'></div>
                    <em class="lb">车型</em>
                  </div>
                </th>
            </tr>//第一列表格的第一个空格，斜杠用div绝对定位
            <tr v-for='(item,key) in dateList' :key='key'>
                <td class="name">{{item.carClass}}</td>
            </tr>
          </table>//第一列表格
          <div class="table-box-inner">
            <table class="my-table table2" :style="{transform:`translateX(-${left}px)`}">
              <tr>
                <th v-for='t in dateLen' :key="t" :class="{on:t%2==1}">{{t}}日</th>
              </tr>//第二列以后列的表格的第一行
              <tr v-for='(item,key) in dateList' :key='key'>
                <td v-if="item.data.length" v-for='(t,i) in item.data' :key='i' :class="{on:i%2==0}">{{t|| ''}}</td>//如果没有数据，显示为空，不显示，但是有表格存在
              </tr>
            </table>//第二列以后列的表格
          </div>
        </div>
      </div>

data代码，实现翻页页数的改变

 data () {
    return {
      title2: '',
      loading: false,
      page: {
        total: '',
        current: 1,
        pageSize: ''
      },//初始化page的总页数、当前页、一页显示多少条参数
      dateList: [],
      dateLen: ''
    }
  },

computed代码

  computed: {
    // 总页数
    totalPage () {
      return Math.ceil(this.page.total / this.page.pageSize)
    },
    // table平移的左边距离,用于:style="{transform:`translateX(-${left}px)`}"
    left () {
      let start = 6
      let tdWidth = 65
      return start + (this.page.current - 1) * tdWidth * (this.page.pageSize - 1)
    }
  }

methods代码

    changePage (num) {
      if (this.page.current + num <= this.totalPage && this.page.current + num > 0) {
        this.page.current += num
      }
    },//翻页的方法
    async queryData () {
      await this.$ajax({
        methods: 'get',
        url: '*********'//api接口
      }).then(res => {
        this.dateList = res.data.verticalAxis
        this.dateList.forEach((item) => {
          item.carClass = item.carClass.substring(0, item.carClass.length - 2)
        })//批量删除数组中每个carClass字符串的后两位字符
        this.dateLen = res.data.abscissa.length//获取天数数组的长度
        this.page.total = this.dateLen//总天数=天数数组的长度
        this.page.pageSize = (
          (this.dateLen === 31) ? 16 : ((this.dateLen === 28) ? 14 : 15)
        )//如果页面总数为31，一页显示16条，如果是28，则显示14条，其他数字显示为15条（因为做的是一个月的天数，所以要判断多少天）
      })
    },//ajax获取数据

style

.table-box{
  padding: 0 20px;
  margin-top: 56px;
}
.table-box-inner{
  margin-left: 75px;
  padding-bottom: 1px;
  overflow: hidden;
}
.my-table{
  border:1px solid #09826a;
  border-collapse: collapse;
  &.table1{//这是sass的语法，代表上一级选择器，实际编译成css就是 .my-table:table1{},表示此元素的伪类
    width: 75px;
    float: left;
  }
  &.table2{
    width: max-content;//填充余下最大的宽度
    transform: translateX(-6px);//这里的翻页效果为滑动,就是整张表左右移动
    // transform: translateX(-1035px);
    transition: all 1s ease;
    th,
    td{
      width: 65px;
    }
  }
  .fisrt{
    width:92px;
  }
  .out{
    border-top:60px;
    width:0px;
    height:0px;
    border-left:150px;
    position:relative;
    .line{
      position:absolute;
      left: -7px;
      width:87px;
      height:1px;
      transform:rotate(34deg);
      background-color: #09826a;
    }
  }
  //左上角斜杠空格的样式
  .tr{font-style:normal;display:block;position:absolute;top: -18px;left: 27px;width: 50px;}
  .lb{font-style:normal;display:block;position:absolute;top: 5px;left:-2px;width: 50px;}
  .on {
      background: rgba(22, 104, 111, 0.2);
    }
  .later{
    width:63px;
  }
  .name{
    // font-size: 12px;
    color:#fff;
  }
  th,
  td{
    height: 50px;
    border:1px solid #09826a ;
    font-size: 14px;
    text-align: center;
  }
  th{
    font-weight: normal;
    color:#fff;
  }
  td{
    color:#00fff6;
  }
}
/deep/.tip{
  font-size: 12px;
  color: #65b3b0
}

效果图（）