在现代的Web开发中，前后端分离架构越来越普遍。前端页面通过Ajax请求从后端获取数据并进行展示是一种常见的需求。本文将通过一个简单的示例，介绍如何使用Vue.js结合Element UI以及Axios库，实现表格数据的动态加载与转换。
一、项目背景
在开发一个会员管理系统时，我们需要在前端页面展示会员列表。会员列表的数据存储在服务器端的数据库中，前端页面需要通过Ajax请求获取这些数据，并将其展示在表格中。为了提升用户体验，我们还需要对获取到的数据进行一些简单的转换，例如将性别的数字标识转换为文字描述，将注册时间的格式进行调整等。
二、技术栈
-
Vue.js：一个渐进式JavaScript框架，用于构建用户界面。
-
Element UI：一套为开发者、设计师和产品经理量身定做的基于Vue 2.0的桌面端组件库。
-
Axios：基于Promise的HTTP客户端，用于浏览器和node.js，方便我们发送HTTP请求。
三、项目实现
1. 页面结构
首先，我们创建一个基本的HTML页面结构，引入必要的CSS和JavaScript文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://labfile.oss.aliyuncs.com/courses/3815/element-ui.css"
/>
<title>表格数据转换</title>
<style>
.container {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="app">
<el-card class="container">
<h2>会员列表</h2>
<el-table
:data="tableData"
stripe
name="userTable"
style="width: 700px"
>
<el-table-column prop="username" label="用户名" width="180">
</el-table-column>
<el-table-column prop="sex" label="性别" width="180">
</el-table-column>
<el-table-column prop="datetime" label="注册时间" width="180">
</el-table-column>
<el-table-column prop="vip" label="会员"> </el-table-column>
</el-table>
</el-card>
</div>
<script src="<url id="" type="url" status="" title="" wc="">https://labfile.oss.aliyuncs.com/courses/3815/vue.js"></script></url>
<script src="<url id="" type="url" status="" title="" wc="">https://labfile.oss.aliyuncs.com/courses/3815/element-ui.js"></script></url>
<script src="<url id="" type="url" status="" title="" wc="">https://labfile.oss.aliyuncs.com/courses/9203/axios.min.js"></script></url>
<script>
new Vue({
el: "#app",
data: function () {
return {
tableData: [],
};
},
mounted() {
axios({
url: "fetchTableData.json",
})
.then((response) => {
const users = response.data.data;
const processedUsers = users.map((user) => {
return {
...user,
sex: user.sex === 1 ? "男" : "女",
vip: user.vip === 1 ? "是" : "否",
datetime: this.formatDateString(user.datetime),
};
});
// 将处理后的数据赋值给 tableData
this.tableData = processedUsers;
})
.catch((error) => {
console.error("Error fetching JSON:", error);
});
},
methods: {
formatDateString(dateString) {
// 确保输入的字符串长度为8
// 使用 slice 方法提取年、月、日
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
// 拼接成新的格式
return `${year}-${month}-${day}`;
},
},
});
</script>
</body>
</html>3. JSON数据文件
为了使示例完整，我们还需要一个JSON文件来模拟后端返回的数据。创建一个名为fetchTableData.json的文件，内容如下：
{
"data": [
{
"username": "user1",
"sex": 1,
"datetime": "20240512",
"vip": 1
},
{
"username": "user2",
"sex": 0,
"datetime": "20240615",
"vip": 0
},
{
"username": "user3",
"sex": 1,
"datetime": "20240718",
"vip": 1
},
{
"username": "user4",
"sex": 0,
"datetime": "20240820",
"vip": 0
}
]
}将该JSON文件放置在与HTML页面相同的目录下，确保Axios请求能够正确找到并加载数据。
四、运行效果
当页面加载完成后，Axios会自动发送请求获取fetchTableData.json文件中的数据。获取到数据后，通过Vue实例中的方法对数据进行处理，将性别的数字标识转换为“男”或“女”，将注册时间的格式从“YYYYMMDD”转换为“YYYY-MM-DD”，并将处理后的数据赋值给tableData。最终，Element UI的表格组件会根据tableData中的数据渲染出会员列表表格。
五、总结
通过本文的示例，我们学习了如何使用Vue.js、Element UI和Axios实现表格数据的动态加载与转换。Axios的使用使得发送HTTP请求变得简单而高效，Vue.js的响应式数据绑定特性让页面的更新变得轻松自如。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言交流。
标签：Axios,表格,datetime,js,Vue,加载,数据,页面 From： https://blog.csdn.net/weixin_66708577/article/details/145225664