<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文章来源：https://www.toymoban.com/news/detail-433876.html
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()
}
文章来源地址https://www.toymoban.com/news/detail-433876.html
到了这里，关于Table 表格 + Pagination 分页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
