分两种情况：1、请求回来的字段是英文，展示需要是中文表头；2、请求回来(现有数据)的字段是中文，展示也是用中文表头展示
情况一（请求回来的字段是英文，展示需要是中文表头）
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
//数据展示部分
<el-table :data="tableData" style="width: 40%">
<el-table-column fixed label="商品名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
......
//分页部分
<el-pagination
@size-change="m1"
@current-change="m2"
:current-page="formData.pageIndex"
:page-sizes="[3, 4, 5]"
:page-size="formData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
//js部分
methods:{
m1(m){
this.formData.pageSize = m;
this.showData()
},
m2(n){
this.formData.pageIndex = n;
this.showData()
},
showData(){//请求数据
this.$api.users
.check(this.formData)
.then((res) => {
console.log(res)
this.tableData = res.data.data.items
this.total = res.data.data.totalCount
})
.catch((err) => {
console.log(err);
})
}
data(){
return {
formData:{staDate:'', endDate:'', pdaCode:'',
storeCode:'', pageIndex:1, pageSize:3},
total:0
}
}
数据展示部分解释：label作为每一列表头的标题，使用Scoped slot，拿到每一行的数据，scope.row.name，请求到的name，每一行都放在label='商品名称'下，以此类推，往下填充数据。唯一不好一点，每添加一列，都需要手动填充一列。
分页部分解释：@size-change和@current-change分别对应的是pageSize和pageIndex的变化而触发的事件。pageSize表示页面（默认）要展示几条数据，pageIndex表示当前在哪一页（默认第一页）total表示一共有几条数据，page-sizes表示可以选择一页展示几条数据。
效果展示：
情况二（请求回来(现有数据)的字段是中文，展示也是用中文表头展示）
背景：这次是做一个excel导入的功能（数据来源），excel的表头就是中文字段，要将excel内容完整的展示出来。
数据有：tableHeader与tableData，是从excel提取出来的，tableHeader是excel的表头字段，tableData是excel的数据，字段名是中文。如下图展示：
下面贴代码：
//数据展示部分
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%">
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" width="130" />
</el-table>
//分页部分
<el-pagination
background
layout="prev, pager, next,jumper, ->, total"
:total="tableData.length"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
style="text-align: center">
</el-pagination>
//js部分
data() {
return {
currentPage: 1,
pageSize: 5,
tableData: [],
tableHeader: []
}
},
methods: {
handleCurrentChange(currentPage) {
this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
// console.log(this.currentPage);
},
},
效果展示：
总结：
第一种情况，通过@size-change与@current-change分别来控制每一页展示数据的条数，与切换页码；
第二种情况，1、通过:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"截取字符串的方式对table页面的数据进行展示，比如现有7条数据，我只截取前面5条，后面的数据留到下一页------------对应第一种情况的方法size-change。2、通过@current-change来进行切换页码
完结！！！！！有更好的建议欢迎留言
