<template>
<div>
<el-button type="primary" @click="handleClick">获取服务端时间</el-button>
<el-row>
<el-col>
<el-table :data="datalist">
<el-table-column prop="employeeNo" label="Employee No"></el-table-column>
<el-table-column prop="employeeName" label="Employee Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="sex" label="Sex"></el-table-column>
<el-table-column prop="position" label="Position"></el-table-column>
<el-table-column prop="createDate" label="Create Date"></el-table-column>
<el-table-column prop="isActive" label="Is Active"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// export default {
// data() {
// return {
// msg: 'this is get employeeinfo'
// }
// }
// }
//
import axios from "axios"
export default {
data() {
return {
datalist: []
}
},
methods:{
handleClick(evt) {
alert('begin')
let _self = this;
axios
.get("http://localhost:5000/api/EmployeeInfo")
.then(function (response) {
//debugger;
// console.log(response);
console.log("finish")
console.log(response)
let data = response.data;
for (let item of data) {
item.sex = item.sex === 1 ? "man" : "woman";
item.isActive = item.isActive ? "yes" : "no";
item.createDate = new Date(item.createDate).toLocaleDateString();
}
_self.datalist = data//response.data;
})
.catch(function (error) {
console.log('系统错误'+ error);
});
}
},
mounted() {
let _self = this;
alert('mount')
axios({
method: "get",
url: "http://localhost:5000/api/EmployeeInfo"
})
.then((response) => {
let data = response.data;
for (let item of data) {
item.sex = item.sex === 1 ? "man" : "woman";
item.isActive = item.isActive ? "yes" : "no";
item.createDate = new Date(item.createDate).toLocaleDateString();
}
_self.datalist = data;
}).catch(function(error){
console.log('错误2' + error)
})
}
}
</script>
<style scoped>
</style>>
</style>
本文介绍了一个使用Vue.js和Axios从服务器获取员工信息的方法,并展示了如何将这些信息格式化后呈现在表格中。其中包括了如何转换性别、激活状态等字段的显示方式,以及日期的本地化处理。
953

被折叠的 条评论
为什么被折叠?



