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

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

img


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

img


这是页面显示

img

主要相关代码

  form>
"margin-top: 20px">
table :data="tableData"  https://img-mid.csdnimg.cn/release/static/image/mid/ask/723191746976126.png "#left")
style="width: 100%">
table-column type="selection" width="55"> table-column>
table-column prop="id" label="日期"> table-column>
table-column prop="name" label="姓名"> table-column>
table-column prop="kid" label="地址"> table-column>
table-column prop="save" label="地址"> table-column>
table-column prop="m" label="地址"> table-column>
table-column prop="w" label="地址"> table-column>
table-column prop="pwd" label="地址"> table-column>

        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>

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

需要在data中声明tableData 其次赋值时不需要转为json字符串直接赋值即可

你赋值的时候不需要转成字符串吧？

this.tableData=JSON.stringify(result.data.data);的JSON.stringify 这个去掉

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^