这里写目录标题
数据分页
id name age
引用http://www.fwxstar.com/code/17_71
杂七杂八的去找起来很累,看了这个博主的稍微改了一下格式,怕后面找不到,好好研究一下 慢慢改善
<template>
<div>
<div style="height:50px">表格本地分页</div>
<el-table :data="tableData" border>
<el-table-column prop="id" label="序号"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="index"
:page-sizes="[2, 4, 6, 8,10]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="tableCopyTableList.length"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: "start", age: 18 },
{ id: 2, name: "Rory", age: 18 },
{ id: 3, name: "Rosa", age: 18 },
{ id: 4, name: "Rosalia", age: 18 },
{ id: 5, name: "Rosalind", age: 18 },
{ id: 6, name: "Karin", age: 18 },
{ id: 7, name: "Kate", age: 18 },
{ id: 8, name: "Roseanne", age: 18 },
{ id: 9, name: "Rosemarie", age: 18 },
{ id: 10, name: "Rosemary", age: 18 },
{ id: 11, name: "Rosetta", age: 18 },
{ id: 12, name: "Arden", age: 18 },
{ id: 13, name: "Arendt", age: 18 },
{ id: 14, name: "Ares", age: 18 },
{ id: 15, name: "Penn", age: 18 },
{ id: 16, name: "Penney", age: 18 },
{ id: 17, name: "Pennie", age: 18 },
{ id: 18, name: "Pennington", age: 18 },
{ id: 19, name: "Bobette", age: 18 },
{ id: 20, name: "end", age: 18 },
],
tableCopyTableList: [],
index: 1,
size: 10,
};
},
methods: {
// 页数改变事件
handleSizeChange(size) {
this.size = size;
this.tableData = this.paging(size, this.index);
},
// 页码改变事件
handleCurrentChange(current) {
this.index = current;
this.tableData = this.paging(this.size, current);
},
// 本地分页的方法
paging(size, current) {
const tableList = JSON.parse(JSON.stringify(this.tableCopyTableList));
const tablePush = [];
tableList.forEach((item, index) => {
if (size * (current - 1) <= index && index <= size * current - 1) {
tablePush.push(item);
}
});
return tablePush;
},
},
created() {
// 初始化数据
this.tableCopyTableList = JSON.parse(JSON.stringify(this.tableData));
this.tableData = this.paging(this.size, this.index);
},
};
</script>
img
<el-table-column prop="image" label="图片" >
<!-- 图片的显示 -->
<template slot-scope="scope">
<img :src="scope.row.image" style="height:50px;witdh:50px;" />
</template>
</el-table-column>
image:“url”,url地址 而不是 ./image本地
image:require(’…/assets/logo.png’) 本地
{ id: 1, name: "start", age: 18 ,image:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'},
{ id: 1, name: "start", age: 18 ,image:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'},
{ id: 1, name: "start", age: 18 ,image:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'},