使用mock数据填写表格同时带点击查看更多

 上代码：

先在methods中写一个方法==并在mouted中条用它

mockF(){//在这里生成一个给MOck数据，和一些表格中的判断==这个方法要在methods中调  let _this =this;

  // 使用 Mock
  var Mock = require('mockjs')
  var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|30': [{
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1,
      'name':'@cname',
      'tong':'@increment(10)',
      'huan':'@increment',
      'salse':'@increment',
    }]
  });
  _this.totalData = data.list.length;
  _this.mockData = data.list.slice(0,_this.pagerNum)
},

在data中写入
　　mockData:[],
　　pagerNum:10,
　　totalData:'',
　　pageText:'点击查看更多',
　　pageTextShow:true

html中的代码
　　

<div id='objOverview'>

<div class="region-content brand mT10 pB30" >
  <div class="header-title obj-header-title">
    <div class=" ">重点品牌销售情况</div>
  </div>
  <div>
    <el-table
      :data="mockData"
      style=" 100%"
      header-row-class-name="grayFont"
      cell-class-name="cell-style"
      @cell-click="cellClick"
    >
      <el-table-column
        prop="id"
        label="序号"
        width="50"
        class-name="grayFont"
      >
      </el-table-column>
      <el-table-column
        label="品牌"
        width="70"
      >
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
          <i class="el-icon-arrow-right"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="salse"
        label="销售"
        width="70"
      >
      </el-table-column>
      <el-table-column
        prop="tong"
        label="同比"
        width="60"
      >
      </el-table-column>
      <el-table-column
        prop="huan"
        label="环比"
        width="60"
      >
      </el-table-column>
    </el-table>
<--下面是点击查看更多部分-->
    <div @click="pagerClick(mockData.length)" class="clickPage mT10" v-if="pageTextShow">
        <span>{{pageText}}</span>
        <i class="el-icon-arrow-down arrow-down"></i>
    </div>
    <div  class="clickPage mT10" v-if="!pageTextShow">{{pageText}}</div>
  </div>
</div>

</div>

 css样式有些不需要你可以删掉===我这里使用了scss

新建一个region.scss文件放入如下样式

//#region{
  .region-content{
     100%;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    .middle-part-obj{
      position: relative;
      left: 8px;
    }
    .obj-mouth-box{
      position: relative;
      left: -14px;
      .obj-mouth{
         94px;
        display: flex;
        span{
          display: block;
           50%;
          text-align: right;
          height: 20px;
          line-height: 20px;
        }
      }
    }

    .obj-data-mouth-font{
      font-family: '微软雅黑';
      font-size: 11px;
      color: #999999;
      text-align: left;
    }
    .obj-data-mouth-font-right{
      font-weight: 700;
    }
    .obj-data-mouth-font-right-red{
      font-weight: 700;
      color: #e04307;
    }
    .obj-data-mouth-font-right-green{
      font-weight: 700;
      color: #00cc00;
    }
    .header-title{
      padding: 13px 0px 2px 0px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #000000;
      text-align: left;
      line-height: 29px;
      transform-origin: 56.5px 11.5px;
    }
    .secondary-title{
      position: relative;
      left: 17px;
      font-weight: 700;
      font-size: 14px;
      color: #000000;
      text-align: left;
      transform-origin: 35.5px 9.5px;
      word-wrap: break-word;
    }
    .middle-part{
      position: relative;
      left: 10px;
      font-style: normal;
      display: flex;
      justify-content: space-between;
      .trend{
         335px;
        height:172px;
      }
      .color-font18{
        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
        font-weight: 700;
        font-size: 18px;
        color: #4D80C2;
        text-align: left;
      }
      .gray-font{
      font-family: '微软雅黑';
      font-weight: 400;
      font-size: 11px;
      color: #999999;
      text-align: left;
    }
      .font-adjustment{
        position: relative;
        top: -2.6px;
      }
      .font-radius{
        border- 0px;
        position: relative;
         72px;
        height: 23px;
        line-height: 23px;
        text-align: center;
        background: inherit;
        background-color: rgba(228, 228, 228, 0.388235294117647);
        border: none;
        border-radius: 10px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #000000;
      }
      .echart-size{
        height: 100px;
      }
    }

  }
  .reach-content{
    .reach-secondary-title{
      display: flex;
      justify-content: space-between;
      padding-right: 14px;
    }
  }
  .location-size{
    color: #e04307;
     24px;
    height: 19px;
    font-size: 22px;
  }
  .header-title-small{
    /*height: 23px;*/
    border- 0px;
    padding: 13px 0px;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    text-align: left;
    transform-origin: 35.5px 9.5px;
    word-wrap: break-word;
    border-bottom: 1px solid #e2e2e2;
  }
  .obj-header-title{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
  }
  .btn{
    .item-btn{
       47px;
      height: 29px;
      background: #fff;
      margin-left: 3px;
      border: 1.3px solid #e04307;
      border-radius: 2px;
      font-family: '5FAE8F6F96C59ED1';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #e04307;
      text-align: center;
      line-height: 23px;
      outline: 2px;
      box-shadow: none;
    }
    .item-btn-false{
       47px;
      height: 29px;
      background: #f2f2f2;
      margin-left: 3px;
      border: 1px solid #f2f2f2;
      border-radius: 2px;
      font-family: '5FAE8F6F96C59ED1';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #716f6f;
      text-align: center;
      line-height: 23px;
    }
  }
  #objOverview{
    .brand{
      .trend{
           335px;
          height:300px;
      }
    }
    .echart-size{
      height: 94px;
    }
    .clickPage{
       100%;
      height: auto;
      text-align: center;
      font-family: '微软雅黑';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #000000;
    }
    .arrow-down{
      font-size: 14px;
      color: #797777;
      font-weight: bold;
       24px;
      height: 20px;
    }
  }
//}

在页面中写样式

<style>
  .grayFont{
    font-family: '微软雅黑';
    font-weight: 400;
    font-size: 11px;
    color: #999999;
    text-align: left;
  }
  .obj-mouth .cell-style{
    font-size: 11px;
    height:5px;
    text-align: right!important;
    padding:0px 0!important;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/region.scss";//这里引入了外部建立的css样式
</style>