效果:
<template>
<div>
<div class="pages-tables" :style="{ height: screeHeight + 'px' }">
<div class="table-header" :style="{ width: header.length * 150 + 'px' }">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<colgroup>
<col
v-for="item in header"
:key="item.label"
style="width: 150px"
/>
</colgroup>
<thead>
<tr>
<th v-for="item in header" :key="item.prop">
<span>{{ item.label }}</span>
</th>
</tr>
</thead>
</table>
</div>
<div
class="table-body"
:style="{
width: header.length * 150 + 'px',
height: screeHeight - 49 + 'px',
}"
>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<colgroup>
<col
v-for="item in header"
:key="item.label"
style="width: 150px"
/>
</colgroup>
<tbody>
<tr
v-for="(tableItem, index) in dataList.slice(
(currentPage - 1) * pagesize,
currentPage * pagesize
)"
:key="'table' + index"
>
<td v-for="item in header" :key="item.prop">
<span>{{ tableItem[item.prop] }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pages-pager">
<div class="select">
<div class="select-input" @click="isSelect = !isSelect">
<input
type="text"
placeholder=""
readonly="readonly"
class="input"
:value="pagesizeFilter"
/>
<span class="suffix"><i class="iconfont icon-wanggexiala"></i></span>
</div>
<div class="select-panel" v-show="isSelect">
<div class="select-wrapper">
<div
v-for="(item, index) in selectList"
:key="'select' + index"
class="select-option"
:class="pagesize == item ? 'is-selected' : ''"
@click="choosePagesSize(item)"
>
{{ item }}条/页
</div>
</div>
</div>
</div>
<div class="total">共 {{ dataList.length }} 条记录</div>
<div class="jump">
<button
type="button"
title="上一页"
class="prev-btn"
:class="currentPage == 1 ? 'is-disabled' : ''"
@click="reducePage"
>
<i class="iconfont icon-wanggeshangyizhang"></i>
</button>
<span class="pager-jump"
><input
type="text"
autocomplete="off"
class="pager-goto"
v-model="currentPage"
/></span>
<span class="pager-count"
><span class="pager-separator">/</span><span>{{ total }}</span></span
>
<button type="button" title="下一页" class="next-btn" @click="addPage">
<i class="iconfont icon-wanggexiayizhang"></i>
</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pagesize: 10,
isSelect: false,
selectList: [10, 15, 20, 50, 100],
screeHeight: `${document.documentElement.clientHeight - 170}`, // 屏幕高
// loading: false,
tableData: [],
dataList: [],
header: [],
};
},
components: {
Datetime,
},
computed: {
pagesizeFilter() {
return this.pagesize + "条/页";
},
total() {
return Math.ceil(this.dataList.length / this.pagesize);
},
},
filters: {},
mounted() {
},
activated() {
},
methods: {
// 上一页
reducePage() {
if (this.currentPage == 1) {
return false;
}
this.currentPage = this.currentPage - 1;
},
// 下一页
addPage() {
if (this.currentPage == this.total) {
return false;
}
this.currentPage = this.currentPage + 1;
},
// 选择条数
choosePagesSize(item) {
this.pagesize = item;
this.currentPage = 1;
this.isSelect = !this.isSelect;
},
findList() {
this.loading = true;
setTimeout(() => {
const list = this.dataList;
this.loading = false;
this.total = list.length;
this.tableData = list.slice(
(this.currentPage - 1) * this.pageSize,
this.currentPage * this.pageSize
);
}, 300);
},
/**
* 获取数据列表
*/
setTableData(data) {
this.header = [
{ label: "网格", prop: "grid" },
{ label: "入群率", prop: "groupinRate" },
{ label: "户数", prop: "houseCount" },
{ label: "已入群人数", prop: "residentCount" },
{ label: "乡镇", prop: "town" },
{ label: "村社", prop: "village" },];
let dataList = [{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东01网格","groupinRate":"100.00%","houseCount":4,"residentCount":4},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"小唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test111","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"大唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test333","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东02网格","groupinRate":"0%","houseCount":0,"residentCount":6},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东03网格","groupinRate":"0%","houseCount":0,"residentCount":1},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东01网格","groupinRate":"100.00%","houseCount":4,"residentCount":4},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"小唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test111","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"糖村","grid":"大唐","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"test333","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东02网格","groupinRate":"0%","houseCount":0,"residentCount":6},{"department":null,"header":null,"list":null,"show":false,"town":"金江镇","village":"城东社区","grid":"城东03网格","groupinRate":"0%","houseCount":0,"residentCount":1},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"马村网格社区","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"马村网格","groupinRate":"0%","houseCount":0,"residentCount":0},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"青莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"白莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"马村社区居委会","grid":"包金村网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"红莲网格","groupinRate":"0%","houseCount":0,"residentCount":null},{"department":null,"header":null,"list":null,"show":false,"town":"老城镇","village":"白莲社区居委会","grid":"黄莲网格","groupinRate":"0%","houseCount":0,"residentCount":null}];
this.dataList = dataList ? dataList : [];
// this.findList();
},
},
};
</script>
<style lang="scss" scoped>
.pages-tables {
-webkit-overflow-scrolling: touch; // ios滑动顺畅
// position: relative;
// height: 200px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: auto;
.table-header {
}
.table-body {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table {
tr {
height: 48px;
color: #606266;
font-size: 14px;
th,
td {
background-image: linear-gradient(#e8eaec, #e8eaec),
linear-gradient(#e8eaec, #e8eaec);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 100% 0, 100% 100%;
box-sizing: border-box;
white-space: pre-line;
word-break: break-all;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
}
thead {
tr {
font-weight: 700;
background: #f8f8f9;
th {
}
}
}
tbody {
tr {
background: #fff;
td {
}
}
}
}
}
.pages-pager {
font-size: 12px;
height: 36px;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #fff;
.total {
font-size: 12px;
color: #606266;
margin: 0 0.4em;
}
.select {
width: 7em;
text-align: center;
cursor: pointer;
position: relative;
font-size: 12px;
height: 2.15em;
.select-input {
width: 100%;
height: 100%;
.input {
width: 100%;
height: 100%;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
border-radius: 4px;
text-align: center;
padding-right: 1.8em;
}
.suffix {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 1.6em;
height: 100%;
user-select: none;
align-items: center;
justify-content: center;
color: #c0c4cc;
}
}
.select-panel {
/* display: none; */
position: absolute;
left: 0;
bottom: 26px;
padding: 4px 0;
color: #606266;
text-align: center;
width: 100%;
.select-wrapper {
padding: 4px 0;
max-height: 200px;
border-radius: 4px;
border: 1px solid #dadce0;
background-color: #fff;
}
.select-option {
padding: 0 10px;
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
text-align: center;
line-height: 24px;
height: 24px;
}
.is-selected {
background-color: #f5f7fa;
font-weight: 700;
color: #409eff;
}
}
}
.jump {
width: 155px;
.is-disabled {
color: #bfbfbf;
}
.prev-btn {
text-align: center;
border-radius: 4px;
margin: 0 0.25em;
user-select: none;
background-color: #fff;
min-width: 2.15em;
height: 2.15em;
line-height: 2em;
display: inline-block;
}
.pager-jump {
margin: 0 0.4em;
vertical-align: middle;
display: inline-block;
.pager-goto {
width: 3.2em;
text-align: center;
border-radius: 4px;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
padding: 0 0.4em;
background-color: #fff;
height: 2.15em;
box-sizing: border-box;
}
}
.pager-count {
text-align: center;
min-width: 2.15em;
height: 2.15em;
line-height: 2em;
display: inline-block;
color: #606266;
font-size: 12px;
.pager-separator {
margin-right: 0.2em;
}
}
.next-btn {
text-align: center;
border-radius: 4px;
margin: 0 0.25em;
user-select: none;
background-color: #fff;
min-width: 2.15em;
height: 2.15em;
line-height: 2em;
display: inline-block;
}
}
}
</style>