码码夫 2022-05-13 15:03 采纳率: 50%
浏览 882

使用的element组件,前端显示 ReferenceError: tableData is not defined 如何解决?

问题遇到的现象和发生背景
<!DOCTYPE html>
<html>


<body>
  <div id="app">
 <el-container style="height: 100%; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1','2', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>学生管理模块</template>
        <el-menu-item-group>
          <template slot="title">学生功能</template>
          <el-menu-item index="1-1">基本信息</el-menu-item>
          <el-menu-item index="1-2">上传文档</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">项目负责人功能</template>
          <el-menu-item index="1-5">创建团队</el-menu-item>
          <el-menu-item index="1-6">创建项目</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>教师功能模块</template>
        <el-menu-item-group>
          <template slot="title">教师功能</template>
          <el-menu-item index="2-1">管理项目</el-menu-item>
          <el-menu-item index="2-2">项目里程碑</el-menu-item>
          <el-menu-item index="2-3">管理团队</el-menu-item>
          <el-menu-item index="2-4">基本信息</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>管理员功能模块</template>
        <el-menu-item-group>
          <template slot="title">管理员功能</template>
          <el-menu-item index="3-1">修改密码</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
<el-container>
   <el-header>
   <el-form :inline="true" :model="admin" class="demo-form-inline">
     <el-form-item label="学号">
       <el-input v-model="admin.ano" placeholder="学号"></el-input>
     </el-form-item>
     <el-form-item label="班级">
       <el-select v-model="admin.classname" placeholder="班级">
         <el-option label="1班" value="1班"></el-option>
         <el-option label="2班" value="2班"></el-option>
         <el-option label="3班" value="3班"></el-option>
         <el-option label="4班" value="4班"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">查询</el-button>
     </el-form-item>
   </el-form>
     </el-header>
<!--批量删除、添加按钮-->
  <el-row>
    <el-button type="primary"@click="dialogVisible = true">增加</el-button>
    <el-button type="danger">批量删除</el-button>
  </el-row>
<!--弹出对话框-->

  <el-dialog
          title="编辑信息"
          :visible.sync="dialogVisible"
          width="30%"
          >
    <el-form ref="admin" :model="admin" label-width="80px">
      <el-form-item label="学号">
        <el-input v-model="admin.ano"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="admin.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="admin.gender"></el-input>
      </el-form-item>
      <el-form-item label="QQ号">
        <el-input v-model="admin.qq"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="admin.role" placeholder="请选择角色">
          <el-option label="负责人" value="1"></el-option>
          <el-option label="成员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="admin.classname" placeholder="请选择班级">
          <el-option label="1班" value="1班"></el-option>
          <el-option label="2班" value="2班"></el-option>
          <el-option label="3班" value="3班"></el-option>
          <el-option label="4班" value="4班"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAdmin">立即添加</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

<!--数据表格展示-->
  <el-main>
      <el-table :data="tableData"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column prop="sno" label="学号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="gender" label="性别" align="center">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="role" label="角色" align="center">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="classname" label="班级" align="center">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="qq" label="QQ号" align="center">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="score" label="分数" align="center">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-main>

    </el-container>
  </el-container>
</el-container>

  </div>
</body>
  <!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>



<script>
    new Vue({
      el: '#app',

      mounted: function () {
        //当页面加载完成后,发送异步请求,获取数据
        var _this = this;
        axios({
          method: "get",
          url: "http://localhost:8080/javaweb_war/selectAllServlet"
        }).then(function (resp) {
          _this.tableData = resp.data;

        })
      },

    
  </script>
</html>

运行结果及报错内容
DevTools 无法加载来源映射:无法加载 chrome-extension://ncennffkjdiamlpmcbajkmaiiiddgioo/js/xl-content.js.map 的内容:系统错误: net::ERR_BLOCKED_BY_CLIENT

img

  • 写回答

3条回答 默认 最新

  • RoddyLD 2022-05-13 15:30
    关注

    你这代码不完整吧,很多data里面的初始值和方法都没写

    img

    评论

报告相同问题?

问题事件

  • 创建了问题 5月13日

悬赏问题

  • ¥15 CCF-CSP 2023 第三题 解压缩(50%)
  • ¥30 comfyui openpose报错
  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在,全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解,已知电阻电压和三级关放大倍数