rcmdp/src/views/mapChlid/InformationList.vue

 <template>
	 <div id="">
		 <div class="table">
			<el-table
			  :data="dataList"
			  :cell-style='cellStyle' 
			  style="width: 100%;"
			  :header-cell-style='headerstyle'>
			  <el-table-column
				prop="name"
				label="人才姓名">
			  </el-table-column>
			  <el-table-column
				prop="type"
				label="职位类别"
				width="120">
			  </el-table-column>
			  <el-table-column
				prop="work"
				label="工作年限"
				width="110">
			  </el-table-column>
			  <el-table-column
				prop="address"
				label="所在地区"
				width="110">
			  </el-table-column>
			</el-table>
		 </div>
		 <div>
			 <div class="total">
				 共{{total}}项
			 </div>
			 <div class="page">
				 <button class="button-left" @click="delpage"><</button>
				 <button v-show="page-4 > 0">...</button>
				 <button v-for="(t,index) in totalpage" @click="pageChoose(index)" v-if="pagenum == 1" v-show="index<page+4&&index>page-5" :class="{check:index+1 == page}">{{index+1}}</button>
				 <button v-for="(t,index) in totalpage" @click="pageChoose(index)" v-if="pagenum == 2" v-show="index<page+3&&index>page-4" :class="{check:index+1 == page}">{{index+1}}</button>
				 <button v-for="(t,index) in totalpage" @click="pageChoose(index)" v-if="pagenum == 3" v-show="index<page+3&&index>page-4" :class="{check:index+1 == page}">{{index+1}}</button>
				 <button v-show="page+3 < totalpage">...</button>
				 <button class="button-right" @click="addpage">></button>
			 </div>
		 </div>
	 </div>
 </template>

<script>
	export default {
		props: ['tableData'],
	      data() {
	        return {
			  dataList: [],//显示数据
			  page :1, //当前页数
			  pagesize :10, //每页的数据
			  pagenum: 1,//判断显示的页码
	        }
	      },
		  mounted() {
		  	this.pagelist()
		  },
		  methods: {
			  //表格样式
			 cellStyle({row, column, rowIndex, columnIndex}) {
			      return 'text-align:center;height: 70px';
			      },
			 //表格表头样式
			 headerstyle() {
				 return 'text-align:center;background:#2360F1;color:#ffffff;height: 47px'
			 },
			 //上一页
			 delpage() {
				 this.page > 1 && this.page--
			 },
			 //下一页
			 addpage() {
			 	 this.page < this.totalpage && this.page++
			 },
			 //每页数据	
			 pagelist() {
				if(this.page * this.pagesize > this.total){
					const last = this.total
					this.pushlist(last)
				}else {
					const last = this.page * this.pagesize
					this.pushlist(last)
				}
			 },
			 pushlist(last) {
				this.dataList = [];
				const start = (this.page - 1) * this.pagesize
				this.dataList = this.tableData.slice(start,last)
			 },
			 pageChoose(index) {
				 this.page = index+1
				 if(this.page < 5) {
					 this.pagenum = 1
				 }else if(this.page >= 5 && this.totalpage - this.page > 5) {
					 this.pagenum = 2
				 }else {
					 this.pagenum = 3
				 }
			 }
		  },
		computed: {
			//数据量
			total() {
				return this.tableData.length
			},
			//总页数
			totalpage() {
				return Math.ceil(this.total/this.pagesize) 
			}
		},
		watch: {
			page() {
				this.pagelist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.total {
		margin: 10px;
		float:left;
		color: #666666;
		font-size: 15px;
	}
	.page {
		margin: 10px;
		float:right;
		display: flex;
		
		button {
			background-color: white;
			border: solid 1px;
			border-color: #DDDDDD;
			color: #666666;
			height: 24px;
			width: 24px;
			font-size: 10px;
		}
		
		.button-left {
			border-radius: 6px 0 0 6px;
		}
		
		.button-right {
			border-radius: 0 6px 6px 0;
		}
		
		.check {
			background: #F4F4F4;
			border: 2px solid #DDDDDD;
		}
	}
</style>
<style>
	.el-table .cell {
	  white-space: pre-line;
	}
</style>