在移动端的报表开发过程中，遇到过两种情况。第一种是客户端直接嵌套H5页面，客户端嵌套框自己有滚动条，所以报表只能一次性加载完成，可左右滑动，但不可以下拉加载。第二种就是纯H5的页面既可以实现左右滑动，也可以实现下来加载。下面我们一一介绍。

第一种：一次加载完成，可左右滑动，不可下拉加载

效果如下：

使用div模拟table表格，废话少说，上代码scroll-table.vue

<template>
  <div class="list-box" :class="'list' + ulWidth">
    <div class="list-box-left">
      <ul class="left-scroll-box">
        <li class="head-style">
          <div v-for="(item, index) in thead.slice(0, 1)" :key="index"><span>{{ item.name }}</span></div>
        </li>
        <li class="body-style" v-for="(item1, index1) in tbody" :key="index1">
          <div>
            <span :class="isArea ? 'cur-style' : ''" @click="toParent(item1)">{{ item1[thead[0].field].length > 12 ? item1[thead[0].field].slice(0, 12) + '...' : item1[thead[0].field] }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-box-right">
      <ul class="right-scroll-box" :class="'ul' + ulWidth">
        <li class="head-style">
          <div v-for="(item, index) in thead.slice(1, thead.length)" :key="index">
            <span>{{ item.name }}</span>
          </div>
        </li>
        <li class="body-style" v-for="(item1, index1) in tbody" :key="index1">
          <div v-for="(val, i) in thead.slice(1, thead.length)" :key="'i' + i">
            <span :style="{color: item1[val.field].indexOf('+') > -1 ? '#FF3232 ' : (item1[val.field].indexOf('-') > -1 ? '#00C235' : '')}">{{ item1[val.field] }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'scrollTable',
  props: {
    tableData: {
      type: Object,
      default: null
    }
  }, // 父组件传入的数据
  data () {
    return {
      tbody: [],
      thead: [],
      isArea: false,
      upDown: [],
      ulWidth: Math.ceil(Math.random() * 10000) // 随机id
    }
  },
  methods: {
    // 点击首列额外的操作，比如下拽或者其他功能 
    toParent (val) {
      if (this.isArea) {
        this.$emit('childEvent', val)
      }
    }
  },
  watch: {
    // 监听数据的变化，然后赋值
    'tableData': {
      deep: true,
      handler: function (newV) {
        const _this = this
        _this.thead = newV.thead
        _this.tbody = newV.tbody
        _this.isArea = newV.isArea
        _this.upDown = newV.upDown
        const height = 55 + (_this.tbody.length * 50) + 'px'
        $('.list' + _this.ulWidth).css('height', height)
        setTimeout(() => {
          $('.list-box-right' + ' .ul' + _this.ulWidth).css('width', (87 * (_this.thead.length - 1)) + 'px')
        })
      }
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
  .list-box {
    position: relative;
  }
  .list-box-left {
    width: 106px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-shadow: 2px 0 4px 0 rgba(0,0,0,.1), 0 0 0 0 #eee;
    z-index: 5;
  }
  .list-box-right {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 106px);
    background-color: #fff;
    overflow: auto;
  }
  .time-area {
    padding: 10px 15px;
  }
  /deep/.scroll-view {
    position: static !important;
  }
  .left-scroll-box {
    text-align: center;
    .head-style {
      background-color: #E9F5FF;
      height: 50px;
      box-sizing: border-box;
      >div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1B82D1;
        text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
      }
    }
    .body-style {
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      height: 45px;
      &:nth-child(odd){
        background-color: #F7F7F7;
      }
      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        line-height: 45px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
        span {
          color: #333;
          display: inline-block;
          line-height: 16px;
        }
        span.cur-style {
          color: #3aa0ff;
          text-decoration: underline;
          // overflow:hidden;
          text-overflow:ellipsis;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
        }
      }
    }
  }
  .right-scroll-box {
    text-align: center;
    .head-style {
      background-color: #E9F5FF;
      height: 50px;
      padding: 5px 0;
      overflow: hidden;
      box-sizing: border-box;
      text-align: center;
      >div {
        float: left;
        width: 87px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 12px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1B82D1;
          text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
        }
        i {
          display: inline-block;
          width: 16px;
          height: 16px;
          vertical-align: sub;
        }
      }
    }
    .body-style {
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      height: 45px;
      overflow: hidden;
      &:nth-child(odd){
        background-color: #F7F7F7;
      }
      >div {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 87px;
        font-size: 12px;
        font-family: Helvetica;
        font-weight: 400;
        text-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1);
        span {
          color: #333;
        }
        span.cur-style {
          color: #3aa0ff;
          text-decoration: underline;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
        }
      }
    }
  }
</style>

下面是调用方法以及数据格式

<template>
  <div class="example-area">
    <div class="title">复杂表格（首列固定，一次加载完）</div>
    <scroll-table :tableData="tableData1" @childEvent="toOtherPage"></scroll-table>
  </div>
</template>
<script>
import scrollTable from './table/scroll-table.vue'
export default {
  name: 'example-area',
  data () {
    return {
      tableData1: {
        thead: [],
        tbody: [],
        isArea: false // 是否需要首列的其他功能
      }
    }
  },
  components: {
    scrollTable
  },
  mounted () {
    // 不需要下来加载首列固定，其他可滑动
    this.tableData1.thead = [
      {field: 'areaName', name: '区域'},
      {field: 'allT0QzCnt', name: '转化量'},
      {field: 'allT1QzCnt', name: '终端迁转量'},
      {field: 'allT2QzCnt', name: '数迁转量'},
      {field: 'gzQzCnt', name: '公众客户迁转'},
      {field: 'gzLeftCnt', name: '公众客户剩余量'},
      {field: 'gzT1Cnt', name: '在网高值用户数'},
      {field: 'zqQzCnt', name: '客户迁转'},
      {field: 'zqLeftCnt', name: '客户剩余量'},
      {field: 'dhwQzCnt', name: '低零转化量'},
      {field: 'fdhwQzCnt', name: '非低零转化量'}
    ]
    this.tableData1.tbody = [
      {allT0QzCnt: '7066', allT1QzCnt: '27210', allT2QzCnt: '229739', areaName: '九重天', dhwQzCnt: '7458', fdhwQzCnt: '-96445', gzLeftCnt: '313925', gzQzCnt: '+221197', gzT1Cnt: '383921', zqLeftCnt: '102694', zqQzCnt: '42818'},
      {allT0QzCnt: '249', zqQzCnt: '2184', gzLeftCnt: '18478', gzT1Cnt: '20726', dhwQzCnt: '311', gzQzCnt: '-9820', fdhwQzCnt: '+4650', areaName: '南天门', allT1QzCnt: '1442', allT2QzCnt: '10313', zqLeftCnt: '7473'},
      {allT0QzCnt: '229', zqQzCnt: '2204', gzLeftCnt: '17435', gzT1Cnt: '19600', dhwQzCnt: '274', gzQzCnt: '+9551', fdhwQzCnt: '+4484', areaName: '北天门', allT1QzCnt: '1326', allT2QzCnt: '10200', zqLeftCnt: '5798'},
      {allT0QzCnt: '382', zqQzCnt: '5536', gzLeftCnt: '32997', gzT1Cnt: '42180', dhwQzCnt: '587', gzQzCnt: '+21937', fdhwQzCnt: '-9095', areaName: '东天门', allT1QzCnt: '3081', allT2QzCnt: '24010', zqLeftCnt: '12615'},
      {allT0QzCnt: '274', zqQzCnt: '2602', gzLeftCnt: '20634', gzT1Cnt: '25649', dhwQzCnt: '328', gzQzCnt: '-13631', fdhwQzCnt: '-5729', areaName: '西天门', allT1QzCnt: '1788', allT2QzCnt: '14171', zqLeftCnt: '6323'}
    ]
  },
  methods: {
  // 跳转其他页面的信息
    toOtherPage (val) {
      console.log(val)
    }
   }
 }
 </script>
 
 <style scoped lang="less">
.example-area {
  width: 100%;
  height: 100%;
  overflow: auto;
  .title {
    font-size: 14px;
    padding: 10px 5px;
  }
  .title12 {
    display: flex;
    align-items: center;
  }
}
.table-area {
  height: 300px;
}
.area-select-box {
  height: 50px;
}
.show-list {
  padding: 5px;
}
// tab-style样式
.item-title{
  flex: 1;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  span{
    color: #1B82D1;
    font-size: 12px;
    margin-top: 3px;
  }
}
.item-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 12px;
  .item-list{
    margin-top: 4px;
    label{
      display: inline-block;
      margin-right: 4px;
      color: #999999;
    }
  }
}
</style>

第二种：首列表头固定，可下拉加载更多

实现后的效果如下：

这里使用了iscroll和vue-iscroll-view这两个依赖包

首先安装这两个包

npm install iscroll --save

npm install vue-isroll-view --save

然后在main.js中引入

import IScrollView from 'vue-iscroll-view'

import IScroll from 'iscroll/build/iscroll-probe.js'

Vue.use(IScrollView, IScroll)

最后就可以使用起来了

封装起来的代码如下：scroll-table-add.vue文件

<template>
  <!-- 滚动页面 -->
  <div class="scroll-area">
    <!-- 左侧-固定 -->
    <div class="scroll-xarea-one">
      <div class="scroll-head">
        <iscroll-view>
          <div class="list-content">
            <table class="table-style">
              <colgroup>
                <col width="110px">
              </colgroup>
              <thead>
                <tr class="head-style">
                  <td>
                    <span>{{ tableData.thead[0].name }}</span>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        </iscroll-view>
      </div>
      <div class="scroll-content">
        <iscroll-view
        class="scroll-view scroll-one-width2"
        ref="scrollView1"
        :options="{scrollX: false, scrollY: true, mouseWheel: true, probeType: 3, click: false, taps:true, preventDefault: false}"
        :scrollerClass="{'scroller': true}"
        @scroll="scrolling1"
        @scrollEnd="scrollEnd1">
          <div class="list-content">
            <table class="table-style" v-if="tableData.tbody.length !== 0">
              <colgroup>
                <col width="110px">
              </colgroup>
              <tbody>
                <tr class="body-style" v-for="(item1, index1) in tableData.tbody" :key="index1">
                  <td v-if="tableData.isArea" class="cur-style" @click="toParent(item1)">{{ item1[tableData.thead[0].field].length > 14 ? item1[tableData.thead[0].field].slice(0, 14) + '...' : item1[tableData.thead[0].field] }}</td>
                  <td v-else>{{ item1[tableData.thead[0].field].length > 14 ? item1[tableData.thead[0].field].slice(0, 14) + '...' : item1[tableData.thead[0].field] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </iscroll-view>
      </div>
    </div>
    <!-- 右侧-可滑动 -->
    <div class="scroll-xarea scroll-xarea1" :class="'list' + ulWidth">
      <div class="scroll-head">
        <iscroll-view
          ref="scrollHead"
          class="scroll-one-width"
          :options="{scrollX: true, scrollY: true, mouseWheel: true, probeType: 3, click: false, taps:true, preventDefault: false}"
          :scrollerClass="{'scroller': true}"
          @scroll="scrollHeadEvent">
          <div class="list-content">
            <table class="table-style" style="table-layout: fixed;">
              <colgroup>
                <col width="110" v-for="(item, index) in tableData.thead.slice(1, tableData.thead.length)" :key="'head' + index"></col>
              </colgroup>
              <thead>
                <tr class="head-style head-style1">
                  <td class="test-style" v-for="(item, index) in tableData.thead.slice(1, tableData.thead.length)" :key="'head' + index">
                    <span>{{ item.name }}</span>
                  </td>
                </tr>
              </thead>
            </table>
          </div>
        </iscroll-view>
      </div>
      <div class="scroll-content">
        <iscroll-view
          class="scroll-view scroll-one-width"
          ref="scrollView"
          :options="{scrollX: true, scrollY: true, mouseWheel: true, probeType: 3, click: false, taps:true, preventDefault: false}"
          :scrollerClass="{'scroller': true}"
          @scroll="scrolling"
          @scrollEnd="scrollEnd">
          <div class="list-content" v-if="tableData.tbody.length !== 0">
            <table class="table-style" style="table-layout: fixed;">
              <colgroup>
                <col width="110" v-for="(item, index) in tableData.thead.slice(1, tableData.thead.length)" :key="'col' + index"></col>
              </colgroup>
              <tbody>
                <tr class="body-style" v-for="(item, index) in tableData.tbody" :key="index">
                  <td v-for="(item1, index1) in tableData.thead.slice(1, tableData.thead.length)" :key="index1">
                    <span :style="{color: item[item1.field].indexOf('+') > -1 ? '#FF3232 ' : (item[item1.field].indexOf('-') > -1 ? '#00C235' : '')}">{{ item[item1.field] }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </iscroll-view>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  name: 'scroll-table',
  props: ['tableData', 'curPage', 'totalPage'],
  data () {
    return {
      ulWidth: Math.ceil(Math.random() * 100000)
    }
  },
  methods: {
    scrollHeadEvent () {
      const _this = this
      const iscroll = _this.$refs.scrollHead.iscroll
      const iscroll1 = _this.$refs.scrollView.iscroll
      _this.$refs.scrollView.iscroll.scrollTo(iscroll.x, iscroll1.y)
    },
    scrolling () {
      const _this = this
      const iscroll = _this.$refs.scrollView.iscroll
      const scrollX = iscroll.x
      _this.$refs.scrollHead.iscroll.scrollTo(scrollX, 0)
      _this.$refs.scrollView1.iscroll.scrollTo(0, iscroll.y)
      if (!_this.topStatus) {
        if (iscroll.y > 30) {
          _this.topStatus = true
        }
      }
      if (!_this.loadStatus) {
        if (Math.abs(iscroll.y) - Math.abs(iscroll.maxScrollY) > 30) {
          _this.loadStatus = true
        }
      }
    },
    scrolling1 () {
      const _this = this
      const iscroll = _this.$refs.scrollView1.iscroll
      const iscroll1 = this.$refs.scrollView.iscroll
      _this.$refs.scrollView.iscroll.scrollTo(iscroll1.x, iscroll.y)
      if (!_this.topStatus) {
        if (iscroll.y > 30) {
          _this.topStatus = true
        }
      }
      if (!_this.loadStatus) {
        if (Math.abs(iscroll.y) - Math.abs(iscroll.maxScrollY) > 30) {
          _this.loadStatus = true
        }
      }
    },
    scrollEnd (scroll) {
      if (scroll.directionY === 1) {
        this.topStatus = false
        if (this.curPage < this.totalPage && this.loadStatus) {
          this.$emit('getMoreData')
        }
      }
    },
    scrollEnd1 (scroll) {
      if (scroll.directionY === 1) {
        this.topStatus = false
        if (this.curPage < this.totalPage && this.loadStatus) {
          this.$emit('getMoreData')
        }
      }
    },
    upIscroll () {
      this.$refs.scrollHead.refresh()
      this.$refs.scrollView.refresh()
    },
    toParent (val) {
      if (this.tableData.isArea) {
        this.$emit('childEvent', val)
      }
    }
  },
  watch: {
    // 监控数据
    tableData: {
      handler (news) {
        const _this = this
        setTimeout(() => {
          $('.list' + _this.ulWidth + ' .scroller').css('width', (110 * news.thead.length - 1) + 'px')
          _this.$refs.scrollHead.refresh()
          _this.$refs.scrollView.refresh()
          _this.$refs.scrollView1.refresh()
        }, 300)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
  /deep/.scroll-view {
    position: static !important;
  }
  .scroll-xarea1 {
    width: calc(100% - 106px);
    left: auto !important;
    right: 0 !important;
  }
  table {
  border-collapse: collapse;
  border: none;
}
.scroller{
  min-height: 102%;
}
.scroll-area {
  height: 100%;
  overflow: auto;
  position: relative;
  .scroll-xarea {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    float: right;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    .scroll-head{
      // height: 34px;
      touch-action: none;
    }
    .scroll-content{
      //padding-top: 5px;
      width: 100%;
      height: calc(~"100% - 50px");
      touch-action: none;
      overflow: hidden;
    }
  }
  .table-style {
    border-collapse: collapse;
    border: none;
    width: 100%;
    //table-layout: fixed;
    .head-style {
      background-color: #E8F2FA;
      box-sizing: border-box;
      td {
        font-family:PingFangSC-Medium,PingFang SC;
        font-size: 12px;
        color: #1B82D1;
        font-weight: 600;
        text-align: center;
        height: 50px;
      }
    }
    .body-style {
      border-bottom: 1px solid #F0F0F0;
      box-sizing: border-box;
      &:nth-child(odd) {
        background: #F7F7F7;
      }
      &:nth-child(even) {
        background: #fff;
      }
      td {
        vertical-align: middle;
        text-align: center;
        display: table-cell;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        height: 50px;
        white-space: normal;
        word-break: break-all;
        padding: 0 5px;
        line-height: 16px;
      }
      td.cur-style {
        color: #3aa0ff;
        text-decoration: underline;
        overflow:hidden;
        text-overflow:ellipsis;
        // display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        // line-height: 34px;
      }
    }
  }
  .scroll-view{
    width: 100%;
    height: 100%;
    touch-action: none;
  }
}
.scroll-xarea-one, .scroll-xarea-two, .scroll-xarea-three {
  float: left;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 2px 2px #ece8e8;
  .scroll-head{
    //height: 34px;
    touch-action: none;
  }
  .scroll-content{
    width: 100%;
    //padding-top: 5px;
    height: calc(~"100% - 50px");
    touch-action: none;
    overflow: hidden;
  }
}
.scroll-xarea-one {
  width: 106px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  box-shadow:2px 0px 4px 0px rgba(0,0,0,0.1),0px -1px 0px 0px rgba(238,238,238,1);
  z-index: 5;
}
.scroll-xarea-two {
  width: 86px;
  overflow: hidden;
}
.scroll-xarea-three {
  position: absolute;
  top: 0;
  left: 0;
  width: 102px;
  overflow: hidden;
  box-shadow:2px 0px 4px 0px rgba(0,0,0,0.1),0px -1px 0px 0px rgba(238,238,238,1);
  z-index: 5;
}
.cur-style {
  color: #1B82D1;
  text-decoration: underline;
}
</style>

在组件中的使用，特别注意需要给定包裹组件的高度即在css中给类名table-area设置高度height

<template>
  <div class="example-area">
    <div class="title">复杂表格（首列固定，可下拉加载更多）</div>
    <div class="table-area">
      <scroll-table-add :tableData="tableData1" :curPage="curPage" :totalPage="totalPage" @childEvent="toTwoLevel" @getMoreData="getMoreData"></scroll-table-add>
    </div>
  </div>
</template>

<script>
import scrollTableAdd from './scroll-table-add.vue'
export default {
  name: 'example-area',
  data () {
    return {
      tableData1: {
        thead: [],
        tbody: [],
        isArea: false // 是否需要首列功能
      },
      curPage: 1, // 需要传入子组件的当前页
      totalPage: 3 // 需要传入子组件的总页
    }
  },
  components: {
    scrollTableAdd
  },
  mounted () {
    this.tableData1.tbody = [
      {allT0QzCnt: '7066', allT1QzCnt: '27210', allT2QzCnt: '229739', areaName: '九重天', dhwQzCnt: '7458', fdhwQzCnt: '-96445', gzLeftCnt: '313925', gzQzCnt: '+221197', gzT1Cnt: '383921', zqLeftCnt: '102694', zqQzCnt: '42818'},
      {allT0QzCnt: '249', zqQzCnt: '2184', gzLeftCnt: '18478', gzT1Cnt: '20726', dhwQzCnt: '311', gzQzCnt: '-9820', fdhwQzCnt: '+4650', areaName: '南天门', allT1QzCnt: '1442', allT2QzCnt: '10313', zqLeftCnt: '7473'},
      {allT0QzCnt: '229', zqQzCnt: '2204', gzLeftCnt: '17435', gzT1Cnt: '19600', dhwQzCnt: '274', gzQzCnt: '+9551', fdhwQzCnt: '+4484', areaName: '北天门', allT1QzCnt: '1326', allT2QzCnt: '10200', zqLeftCnt: '5798'},
      {allT0QzCnt: '382', zqQzCnt: '5536', gzLeftCnt: '32997', gzT1Cnt: '42180', dhwQzCnt: '587', gzQzCnt: '+21937', fdhwQzCnt: '-9095', areaName: '东天门', allT1QzCnt: '3081', allT2QzCnt: '24010', zqLeftCnt: '12615'},
      {allT0QzCnt: '274', zqQzCnt: '2602', gzLeftCnt: '20634', gzT1Cnt: '25649', dhwQzCnt: '328', gzQzCnt: '-13631', fdhwQzCnt: '-5729', areaName: '西天门', allT1QzCnt: '1788', allT2QzCnt: '14171', zqLeftCnt: '6323'},
      {allT0QzCnt: '249', zqQzCnt: '2184', gzLeftCnt: '18478', gzT1Cnt: '20726', dhwQzCnt: '311', gzQzCnt: '-9820', fdhwQzCnt: '+4650', areaName: '南天门', allT1QzCnt: '1442', allT2QzCnt: '10313', zqLeftCnt: '7473'},
      {allT0QzCnt: '229', zqQzCnt: '2204', gzLeftCnt: '17435', gzT1Cnt: '19600', dhwQzCnt: '274', gzQzCnt: '+9551', fdhwQzCnt: '+4484', areaName: '北天门', allT1QzCnt: '1326', allT2QzCnt: '10200', zqLeftCnt: '5798'},
      {allT0QzCnt: '382', zqQzCnt: '5536', gzLeftCnt: '32997', gzT1Cnt: '42180', dhwQzCnt: '587', gzQzCnt: '+21937', fdhwQzCnt: '-9095', areaName: '东天门', allT1QzCnt: '3081', allT2QzCnt: '24010', zqLeftCnt: '12615'},
      {allT0QzCnt: '274', zqQzCnt: '2602', gzLeftCnt: '20634', gzT1Cnt: '25649', dhwQzCnt: '328', gzQzCnt: '-13631', fdhwQzCnt: '-5729', areaName: '西天门', allT1QzCnt: '1788', allT2QzCnt: '14171', zqLeftCnt: '6323'},
      {allT0QzCnt: '249', zqQzCnt: '2184', gzLeftCnt: '18478', gzT1Cnt: '20726', dhwQzCnt: '311', gzQzCnt: '-9820', fdhwQzCnt: '+4650', areaName: '南天门', allT1QzCnt: '1442', allT2QzCnt: '10313', zqLeftCnt: '7473'},
      {allT0QzCnt: '229', zqQzCnt: '2204', gzLeftCnt: '17435', gzT1Cnt: '19600', dhwQzCnt: '274', gzQzCnt: '+9551', fdhwQzCnt: '+4484', areaName: '北天门', allT1QzCnt: '1326', allT2QzCnt: '10200', zqLeftCnt: '5798'},
      {allT0QzCnt: '382', zqQzCnt: '5536', gzLeftCnt: '32997', gzT1Cnt: '42180', dhwQzCnt: '587', gzQzCnt: '+21937', fdhwQzCnt: '-9095', areaName: '东天门', allT1QzCnt: '3081', allT2QzCnt: '24010', zqLeftCnt: '12615'},
      {allT0QzCnt: '274', zqQzCnt: '2602', gzLeftCnt: '20634', gzT1Cnt: '25649', dhwQzCnt: '328', gzQzCnt: '-13631', fdhwQzCnt: '-5729', areaName: '西天门', allT1QzCnt: '1788', allT2QzCnt: '14171', zqLeftCnt: '6323'}
    ]
  },
  methods: {
    // 跳转其他页面的信息
    toTwoLevel (val) {
      console.log(val)
    },
    getMoreData () {
      alert('加载更多数据')
    }
  }
}
</script>
<style scoped lang="less">
.example-area {
  width: 100%;
  height: 100%;
  overflow: auto;
  .title {
    font-size: 14px;
    padding: 10px 5px;
  }
  .title12 {
    display: flex;
    align-items: center;
  }
}
.table-area {
  height: 500px; // 需要给报国table表格的框指定高度
}
</style>

期待端午节日的到来，放一张周末的旅游者，哈哈哈！