但是以上程序报错,会显示所有数据
时间: 2024-03-10 09:50:26 浏览: 17
如果你希望每页只展示 6 条数据,那么你需要在 el-table 组件中设置 `:page-size="6"`,这样才能保证每页只展示 6 条数据。另外,你需要在 el-table-column 组件中添加 `sortable` 属性,否则表格不支持排序功能。最终的代码如下所示:
```
<template>
<div class="box3">
<el-table :data="tableData" style="width: 100%" :page-size="6">
<el-table-column prop="user" label="user" sortable></el-table-column>
<el-table-column prop="M" label="M" sortable></el-table-column>
<el-table-column prop="M_level" label="M_level" sortable></el-table-column>
<el-table-column prop="F" label="F" sortable></el-table-column>
<el-table-column prop="F_level" label="F_level" sortable></el-table-column>
<el-table-column prop="R" label="R" sortable></el-table-column>
<el-table-column prop="R_level" label="R_level" sortable></el-table-column>
</el-table>
<el-pagination
v-if="total > 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[6, 12, 18, 24]"
layout="total, sizes, prev, pager, next"
:page-size.sync="pageSize"
:current-page.sync="currentPage"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [],
total: 0,
pageSize: 6,
currentPage: 1,
};
},
created() {
this.getData1();
},
methods: {
getData1() {
return axios
.get('/1.json', {
maxContentLength: 50 * 1024 * 1024,
})
.then(
(response) => {
this.tableData = response.data;
this.total = response.data.length;
},
(error) => {
console.log(error + '没有拿到数据');
}
);
},
handleSizeChange(pageSize) {
this.pageSize = pageSize;
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
},
};
</script>
```
在这个版本的代码中,我们在 el-table 组件中添加了 `:page-size="6"` 属性,这样就能保证每页只展示 6 条数据了。另外,在 el-table-column 组件中添加了 `sortable` 属性,表示该列支持排序功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)