使用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="width: 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{
width: 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{
width: 94px;
display: flex;
span{
display: block;
width: 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{
width: 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-width: 0px;
position: relative;
width: 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;
width: 24px;
height: 19px;
font-size: 22px;
}
.header-title-small{
/*height: 23px;*/
border-width: 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{
width: 47px;
height: 29px;
background: #fff;
margin-left: 3px;
border: 1.3px solid #e04307;
border-radius: 2px;
font-family: '\5FAE\8F6F\96C5\9ED1';
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{
width: 47px;
height: 29px;
background: #f2f2f2;
margin-left: 3px;
border: 1px solid #f2f2f2;
border-radius: 2px;
font-family: '\5FAE\8F6F\96C5\9ED1';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #716f6f;
text-align: center;
line-height: 23px;
}
}
#objOverview{
.brand{
.trend{
width: 335px;
height:300px;
}
}
.echart-size{
height: 94px;
}
.clickPage{
width: 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;
width: 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>
