vue表格内容没有显示
这是返回的后端表格信息
这是后来我在前端传到控制台的后端对象信息
这是页面显示
主要相关代码
</el-form>
<el-card style="margin-top: 20px">
<el-table :data="tableData" https://img-mid.csdnimg.cn/release/static/image/mid/ask/723191746976126.png "#left")
style="width: 100%">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="id" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="kid" label="地址"> </el-table-column>
<el-table-column prop="save" label="地址"> </el-table-column>
<el-table-column prop="m" label="地址"> </el-table-column>
<el-table-column prop="w" label="地址"> </el-table-column>
<el-table-column prop="pwd" label="地址"> </el-table-column>
</el-table>
login() {
this.$refs.loginForm.validate((valid) => {
if (valid) { //合法
loginAxios(this.loginForm.username,this.loginForm.password).then(result=>{
if (result.data.code===9000){
window.sessionStorage.setItem("user",JSON.stringify(result.data.data));
this.tableData=JSON.stringify(result.data.data);
console.log(this.tableData);
// this.$router.push('/home');
this.$message.success('登录成功！');
}else {
this.$message.error(result.data.msg);
}
}).catch(error=>{
this.$message.error("登录时出现错误，请重新尝试！");
})
} else {
console.log('error submit!!');
return false;
}
});
},
这是完整代码
<template>
<body id="poster">
<el-form class="login-container" label-position="left" label-width="0px"
:model="loginForm" :rules="loginFormRules" ref="loginForm">
<h3 class="login_title">登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"
@keyup.enter.native="login" id="username"
@keyup.down.native="focusNext"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"
@keyup.enter.native="login" id="password" show-password
@keyup.up.native="focusUp"></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="reset">重置</el-button>
</el-form-item>
</el-form>
<el-card style="margin-top: 20px">
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="id" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="kid" label="地址"> </el-table-column>
<el-table-column prop="save" label="地址"> </el-table-column>
<el-table-column prop="m" label="地址"> </el-table-column>
<el-table-column prop="w" label="地址"> </el-table-column>
<el-table-column prop="pwd" label="地址"> </el-table-column>
</el-table>
</el-card>
</body>
</template>
<script>
import loginAxios from "@/network/login/login"; //导入登录的网络请求
export default {
name: "Login",
data() {
return {
loginForm: { //表单数据
username: '',
password: ''
},
loginFormRules:{ //拦截规则
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
]
}
}
},
methods: {
focusNext(){ //光标指向下一个
document.getElementById('password').focus();
},
focusUp(){ //光标指向上一个
document.getElementById('username').focus();
},
login() {
this.$refs.loginForm.validate((valid) => {
if (valid) { //合法
loginAxios(this.loginForm.username,this.loginForm.password).then(result=>{
if (result.data.code===9000){
window.sessionStorage.setItem("user",JSON.stringify(result.data.data));
this.tableData=JSON.stringify(result.data.data);
console.log(this.tableData);
// this.$router.push('/home');
this.$message.success('登录成功！');
}else {
this.$message.error(result.data.msg);
}
}).catch(error=>{
this.$message.error("登录时出现错误，请重新尝试！");
})
} else {
console.log('error submit!!');
return false;
}
});
},
reset(){ //重置按钮
this.$refs.loginForm.resetFields();
}
}
}
</script>
