Table 表格 + Pagination 分页

<el-table>属性
v-loading				加载动画
data					显示的数据
border					是否带有纵向边框
fit						列的宽度是否自撑开
highlight-current-row	是否要高亮当前行
row-style				行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
cell-style				单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
header-cell-style		表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
default-sort			默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序

<el-table-column>属性
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip
sortable				对应列是否可以排序
prop					对应列内容的字段名
width					对应列的宽度
min-width				对应列的最小宽度
label					显示的标题
align					对齐方式

<el-table 
	v-loading="listLoading" 
	:data="list" 
	border 
	fit 
	highlight-current-row 
	:row-style="{height: '38px'}"
	:cell-style="{padding: '0'}" 
	:header-cell-style="{backgroundColor:'#409EFF',color:'#fff',textAlign:'center',height:'36px',padding:'0'}"  
	style="width: 100%"
	:default-sort="{prop: 'id', order: 'descending'}">
	<el-table-column align="center" label="ID" width="80" sortable prop="id">
		<template slot-scope="scope">
			<span>{{ scope.row.id }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="充值包名" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.name }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="展示名" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.showname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="到账金额(元)" show-overflow-tooltip min-width="100">
		<template slot-scope="scope">
			<span>{{ scope.row.price }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="售价(元)" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.sellprice }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="类型" show-overflow-tooltip min-width="100">
		<template slot-scope="scope">
			<el-tag v-show="scope.row.type===1" type="success">普通充值包</el-tag>
			<el-tag v-show="scope.row.type===2" type="warning">活动充值包</el-tag>
			<el-tag v-show="scope.row.type===3" type="danger">首充充值包</el-tag>
			<el-tag v-show="scope.row.type===5" type="">分期到账充值包</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center" label="充值包状态">
		<template slot-scope="scope">
			<el-tag v-show="scope.row.status==5" type="success">正常</el-tag>
			<el-tag v-show="scope.row.status==6" type="danger">禁用</el-tag>
		</template>
	</el-table-column>
	<el-table-column align="center" label="代理">
		<template slot-scope="scope">
			<span>{{ scope.row.aname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="子代理">
		<template slot-scope="scope">
			<span>{{ scope.row.accname }}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="创建时间" min-width="100">
		<template slot-scope="scope">
			<span>{{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
		</template>
	</el-table-column>
	<el-table-column align="center" label="排序" sortable>
		<template slot-scope="scope">
			<span>{{ scope.row.sort }}</span>
		</template>
	</el-table-column>
	
	

	<el-table-column align="center" label="操作" min-width="200" fixed="right">
		<template slot-scope="scope">
			<el-button type="primary" size="mini" :disabled="scope.row.status==5">启用</el-button>
			<el-button type="primary" size="mini" :disabled="scope.row.status==6">禁用</el-button>
			<el-button type="primary" size="mini">修改排序</el-button>
		</template>
	</el-table-column>
</el-table>

<!-- 分页 -->
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

import Pagination from '@/components/Pagination'
components: {
	Pagination,
},
data() {
	return {
		tabHeader: tabHeader,
		listLoading: true,
		list: [],
		total: 0,
		listQuery: {
			page: 1,
			limit: 10,
			status: 5, // 正常
			aid: null, // 代理id
			accid: null, // 子代理id
		},
	}
},
created() {
	// 自行写接口请求进行赋值
},

Pagination分页

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: false,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 15, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

scroll-to.js

Math.easeInOutQuad = function(t, b, c, d) {
	t /= d / 2
	if (t < 1) {
		return c / 2 * t * t + b
	}
	t--
	return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
		.mozRequestAnimationFrame || function(callback) {
			window.setTimeout(callback, 1000 / 60)
		}
})()

/**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
function move(amount) {
	document.documentElement.scrollTop = amount
	document.body.parentNode.scrollTop = amount
	document.body.scrollTop = amount
}

function position() {
	return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

/**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
export function scrollTo(to, duration, callback) {
	const start = position()
	const change = to - start
	const increment = 20
	let currentTime = 0
	duration = (typeof(duration) === 'undefined') ? 500 : duration
	var animateScroll = function() {
		// increment the time
		currentTime += increment
		// find the value with the quadratic in-out easing function
		var val = Math.easeInOutQuad(currentTime, start, change, duration)
		// move the document.body
		move(val)
		// do the animation unless its over
		if (currentTime < duration) {
			requestAnimFrame(animateScroll)
		} else {
			if (callback && typeof(callback) === 'function') {
				// the animation is done so lets callback
				callback()
			}
		}
	}
	animateScroll()
}