### 如何在使用 ElementUI 的
前端项目中通过
遍历处理从后端获取的
数据
在 Vue.js 和 ElementUI 结合使用的场景下，通常会从
前端向后端发送请求来获取
数据，并将这些
数据展示到页面上。以下是实现这一功能的具体方法：
#### 1. 使用 Axios 获取后端返回的
数据
Axios 是一个基于 Promise 的 HTTP 库，可以用来发起网络请求并接收响应
数据。
```javascript
// 引入 axios
import axios from 'axios';
export default {
data() {
return {
tableData: [] // 存储从后端获取的
数据
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/admin/data') // 替换为实际的 API 地址
.then(response => {
this.tableData = response.data; // 将后端返回的
数据赋值给 tableData
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
}
};
```
上述代码展示了如何利用 `created` 生命周期钩子，在组件初始化时调用 `fetchData` 方法，从而异步加载后台
数据[^1]。
---
#### 2. 利用 ElementUI 表格组件渲染
数据
ElementUI 提供了一个强大的表格组件 `<el-table>`，可以通过绑定属性的方式轻松地展示数组形式的
数据。
```html
<template>
<div>
<!-- 展示管理员
数据 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
</el-table>
<!-- 分页控件 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[2, 4, 6, 8]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</template>
```
在此模板中，`<el-table>` 组件绑定了 `tableData` 数组作为其
数据源，而分页逻辑则由 `<el-pagination>` 控制[^3]。
---
#### 3. 实现分页逻辑
为了支持分页功能，需要定义两个变量：`pageSize`（每页条数）和 `currentPage`（当前页码）。当用户更改分页选项时触发对应的事件
处理器更新视图。
```javascript
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1; // 改变每页数量时重置到第一页
this.fetchData(); // 更新
数据显示
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData(); // 更新
数据显示
},
fetchData() {
const params = { page: this.currentPage, size: this.pageSize }; // 构造查询参数
axios.get('/api/admin/data', { params }) // 发送带分页参数的 GET 请求
.then(response => {
this.tableData = response.data.list; // 设置表格
数据
this.totalCount = response.data.total; // 总记录数用于分页计算
})
.catch(error => {
console.error('Error fetching paginated data:', error);
});
}
},
data() {
return {
pageSize: 2,
currentPage: 1,
totalCount: 0,
tableData: []
};
}
```
此部分实现了动态调整分页大小以及切换不同页的功能。
---
#### 4.
处理复杂
数据结构的情况
如果后端返回的
数据并非简单的 JSON 对象列表，则可能需要先对其进行预
处理再传递至 UI 层面。例如，假设某些字段嵌套较深或者名称不符合预期格式，可通过 JavaScript
遍历来重新整理它们。
```javascript
methods: {
processResponse(dataList) {
return dataList.map(item => ({
id: item.id || '', // 默认为空字符串以防
undefined
name: `${item.firstName} ${item.lastName}`, // 合并名字与姓氏
role: item.role.name // 取出深层路径下的值
}));
},
fetchData() {
axios.get('/api/complex-data')
.then(response => {
this.tableData = this.processResponse(response.data); // 转换后的
数据赋值给 tableData
})
.catch(error => {
console.error('Error processing complex data:', error);
});
}
}
```
这里演示了如何自定义函数 `processResponse` 来适配特定需求[^2]。
---
###
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
877
