m0_59424811 2023-03-24 16:42 采纳率: 60%
浏览 52
已结题

vue表格内容没有显示,如何解决?(标签-后端|关键词-重置)

vue表格内容没有显示
这是返回的后端表格信息

img


这是后来我在前端传到控制台的后端对象信息

img


这是页面显示

img

主要相关代码

  </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>


  • 写回答

4条回答 默认 最新

  • 看客008 2023-03-24 16:49
    关注

    没在data里声明tableData,不给你响应的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月1日
  • 已采纳回答 3月24日
  • 创建了问题 3月24日

悬赏问题

  • ¥15 hfss 组天线阵列报错:The A and B vectors must be parallel to the XY plane,如何解决?
  • ¥30 ansible连接设备报错
  • ¥60 pmsampsize包取值问题
  • ¥15 波形合成电路的设计学习
  • ¥15 unity脚本挂不上
  • ¥15 数学建模数学建模需要
  • ¥20 Java Sound Api 调用Mixer.getLine偶现Line unsupported错误。
  • ¥15 使用cuda加速opencv运算但是报错AttributeError: module 'cv2.cuda' has no attribute 'getCudaEnabledDeviceCount'
  • ¥15 java输入输出异常
  • ¥15 三子连珠对弈小游戏制作