html
<template>
<div class="left">
<div class="qjxnTbable">
<table cellspacing="0">
<thead>
<tr>
<th v-for="(item,index) in qjxnTblae.thead" :key="index">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in qjxnTblae.data" :key="index">
<td>{{item.danwei}}</td>
<td>
<div class="line">
<div :style="{'width':`${item.abl}%`}" :class="[item.abl>50? 'line-zb':'line-Xzb']">
</div>
<div :class="[item.abl>50? 'line-text':'line-Xtext']">{{item.abl}}%</div>
</div>
</td>
<td>{{item.dbzb}}个</td>
<td>{{item.wdbzb}}个</td>
<td>{{item.wcl}}%</td>
</tr>
</tbody>
</table>
</div>
<div class="fenye">
<!-- page-count:显示页码按钮的个数 -->
<el-pagination :page-size="PageInfo.pagesize" :current-page="PageInfo.pagenum" :total="PageInfo.total"
:pager-count="5" prev-text="上一页" next-text="下一页" layout=" prev, pager, next,jumper" ref="pagination"
@current-change="handleCurrentChange">
</el-pagination>
<button class="fy-btn">确定</button>
</div>
</div>
<template>js
<script>
export default {
data: () => ({
// 全疆的表格数据
qjxnTblae: {
thead: ["牵头单位", "达标率", "达标指标", "未达标指标", "完成率"],
data: [
{
danwei: 'xxxxxx',
abl: '80',
dbzb: "2",
wdbzb: "2",
wcl: '60'
},
{
danwei: 'xxxxxx',
abl: '50',
dbzb: "2",
wdbzb: "2",
wcl: '60'
},
{
danwei: 'xxxxxx',
abl: '70',
dbzb: "2",
wdbzb: "2",
wcl: '60'
},
{
danwei: 'xxxxxx',
abl: '70',
dbzb: "2",
wdbzb: "2",
wcl: '60'
},
{
danwei: 'xxxxxx',
abl: '100',
dbzb: "2",
wdbzb: "2",
wcl: '60'
},
{
danwei: 'xxxxxx',
abl: '70',
dbzb: "2",
wdbzb: "2",
wcl: '60'
}
]
},
//全疆表格分页信息
PageInfo: {
pagenum: 1,// 当前页数
pagesize: 6,// 每页显示条目个数
total: 300,//数据总条数
},
}，
methods: {
// 加载左侧表格的数据
async getList() {
const res = await this.$http.get("请求数据的接口", {
params: { // 请求的参数
pagenum: this.PageInfo.pagenum,
pagesize: this.PageInfo.pagesize,
},
});
if (res.code === 200) { // 请求成功后赋值
this.qjxnTblae.data = res.data;
// 得到结果后将总条数赋值给
this.PageInfo.total = total
}
},
// 选择下一页或者跳到第几页，重新赋值pagenum，再请求一次数据
handleCurrentChange(val) {
this.PageInfo.pagenum = val;
// 后面请求数据的时候打开
// this.getList();
console.log(`当前页: ${val}`);
},
},
}
</script>css
.left {
width: 1020px;
height: 857px;
background: url(../../assets/images/lbg3.png) no-repeat;
background-size: 100% 100%;
.qjxnTbable {
width: 967px;
margin: 0 auto;
margin-top: 45.5px;
table {
width: 967px;
thead {
height: 36px;
line-height: 36px;
background-image: linear-gradient(90deg, rgba(0, 136, 178, 0.00) 0%, rgba(0, 136, 178, 0.6) 25%);
position: relative;
tr>th {
// width:calc(100%/5);
opacity: 0.75;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #32C5FF;
text-align: center;
line-height: 12px;
font-weight: 400;
}
}
tbody {
tr {
height: 53px;
line-height: 53px;
}
tr>td {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #32C5FF;
text-align: center;
font-weight: 400;
border-bottom: rgba(0, 76, 110, 1) 1px dashed;
}
tr>td:nth-child(2) {
height: 53px;
display: flex;
justify-content: center;
align-items: center;
}
.line {
width: 188px;
height: 14px;
background: #2C2B32;
border-radius: 15px;
display: flex;
position: relative;
.line-zb {
background: #0AA19E;
border-radius: 100px;
}
.line-Xzb {
background: #EA8139;
border-radius: 100px;
}
.line-text {
position: absolute;
right: 20px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #00FFFA;
line-height: 14px;
font-weight: 400;
}
.line-Xtext {
position: absolute;
right: 20px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #EA8139;
line-height: 14px;
font-weight: 400;
}
}
}
tbody:before {
line-height: 20px;
content: "\200C";
display: block;
}
}
}
.fenye {
min-width: 580px;
height: 70px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 128px;
.fy-btn {
width: 50px;
height: 36px;
font-family: PingFangSC-Regular;
font-size: 15px;
line-height: 36px;
color: #FFFFFF;
text-align: justify;
font-weight: 400;
text-align: center;
background: #10AADD;
border-radius: 2px;
margin-left: 10px;
}
>>>.el-pagination .btn-next {
width: 70px;
height: 36px;
background-color: transparent;
border: 1px solid rgba(0, 122, 216, 1);
border-radius: 2px;
margin-left: 19px;
padding: 0;
}
>>>.el-pagination .btn-next span {
font-family: PingFangSC-Regular;
font-size: 15px;
color: #FFFFFF;
text-align: justify;
font-weight: 400;
}
>>>.el-pagination .btn-prev {
width: 70px;
height: 36px;
background-color: transparent;
border: 1px solid rgba(0, 122, 216, 1);
border-radius: 2px;
padding: 0;
}
>>>.el-pagination .btn-prev span {
font-family: PingFangSC-Regular;
font-size: 15px;
color: #FFFFFF;
text-align: justify;
font-weight: 400;
}
>>>.el-pager li.active {
/* color: #409EFF; */
cursor: default;
color: #ffff;
background: #007AD8;
width: 36px;
height: 36px;
line-height: 36px;
}
>>>.el-pager li {
/* padding: 0 0.020833rem; */
background: #FFF;
font-size: 0.067708rem;
min-width: 36px;
min-height: 36px;
/* line-height: 0.145833rem; */
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: default;
color: #ffff;
background: transparent;
line-height: 36px;
margin-left: 19px;
border: 1px solid rgba(0, 122, 216, 1);
border-radius: 2px;
}
>>>.el-pagination__jump {
margin-left: 0.125rem;
font-family: PingFangSC-Regular;
font-size: 15px;
color: #FFFFFF;
text-align: justify;
font-weight: 400;
}
>>>.el-pagination__editor.el-input {
width: 36px;
height: 36px;
font-size: 15px;
border: 1px solid rgba(0, 122, 216, 1);
border-radius: 2px;
background: transparent;
margin: 0 14px;
}
>>>.el-pagination__editor.el-input .el-input__inner {
height: 36px;
width: 36px;
background-color: transparent;
border: 0;
/* text-align: center; */
margin-left: -3px;
color: #ffff;
}
// 当选中的是第一页或者最后一页时候分别隐藏上一页和下一页按钮
>>>.el-pagination button:disabled {
color: #C0C4CC;
background-color: #FFF;
cursor: not-allowed;
display: none;
}
}
}效果：
?elemetui(<el-pagination>)分页组件补充
1、total：设置分页数据的总个数。
2、page-size：设置每页的数据个数。（默认值：10）
3、page-count：设置分页的页数。
设置分页可以有两种方案：
（1）设置total和page-size。
（2）设置page-size和page-count。4、pager-count：设置可显示的最大页码个数（7）。
5、prev-text：前一项替代文本。
next-text：后一项替代文本。
6、background：设置页码是否带有背景。
7、hide-on-single-page：设置是否只有一页时隐藏分页组件。
8、current-page：设置当前页（1）。
9、small：设置分页组件为小型外观。
10、layout：设置分页组件各个分量的显示外观。
取值：下列单词任意搭配的字符串，单词之间用逗号隔开。
sizes（每页多少条数据计数器）、
prev（上一页）、pager（页码）、next（下一页）、
jumper（跳转页）、
->（书写在该符号后面的内容右对齐）
total（总共多少条数据）。11、size-change事件：当page-size属性发生变化时触发该事件。
当用户在每页多少条数据计数器中进行修改时触发page-size属性的变化。
<el-pagination @size-change=“sizeChange”> sizeChange(size){ //size-每页所显示的数据个数 }- 12、current-change事件：当current-page属性发生变化时触发该
事件。当用户单击任意页码或实现页面跳转时会触发current-page属性的变化
<el-pagination @current-change=“currentChange”> currentChange(current){ // current - 所改变的当前页 }13、prev-click事件：参数为当前页码。
14、next-click事件：参数为当前页码。
注意：当无法修改elementui的样式的时候可以使用>>> 去指向elementui样式?