利用java Vue springboot开发的网页上表格部分数据前端无法显示

后端数据发送是对的

img


但是从表头in_media(内部介质)这一列开始数据就没有了 前端接收到的数据为null 但是后端发送了正确点数据 不知道哪里有问题😭

img

vue代码
ref="refreshTable"
:data="tableData"
border
stripe
style="width: 100%; font-size: 10px"
@selection-change="handleSelectionChange">



有好几个表头列

data() {
return{
tableData: [],
total: 0,
pageNum: 1,
pageSize: 10,
username: "",
nickname: "",
nuclear_scu_level : "",
spec_level : "",
seis_level : "",
qua_level : "",
location : "",
parts : "",
material : "",
size : "",
quantity : "",
in_media : "",
in_temp : "",
in_press : "",
flow_state : "",
in_env_level : "",
out_media : "",
out_temp : "",
out_press : "",
cond_risk : "",
out_env_level : "",
in_pro : "",
out_pro : "",
cath_pro : "",
ins_layer : "",
A1 : "",
A2 : "",
A3_1 : "",
A3_2 : "",
A4_1 : "",
A4_2 : "",
cor_coefficient : "",
cor_level:"",
in_cor_risk : "",
out_cor_risk : "",
cor_outline : "",
remark : "",
dialogFormVisible: false,
multipleSelection: [],
dialogFormLookVisible: false,
form: {},
}
},
created() {
// 请求分页查询数据
this.load()
},
load() {
this.request.get("http://localhost:9090/user/page", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username,
nickname: this.nickname,
nuclear_scu_level: this.nuclear_scu_level,
spec_level: this.spec_level,
seis_level: this.seis_level,
qua_level: this.qua_level,
location: this.location,
parts: this.parts,
material: this.material,
size: this.size,
quantity: this.quantity,
in_media: this.in_media,
in_temp: this.in_temp,
in_press: this.in_press,
flow_state: this.flow_state,
in_env_level: this.in_env_level,
out_media: this.out_media,
out_temp: this.out_temp,
out_press: this.out_press,
cond_risk: this.cond_risk,
out_env_level: this.out_env_level,
in_pro: this.in_pro,
out_pro: this.out_pro,
cath_pro: this.cath_pro,
ins_layer: this.ins_layer,
A1: this.A1,
A2: this.A2,
A3_1: this.A3_1,
A3_2: this.A3_2,
A4_1: this.A4_1,
A4_2: this.A4_2,
cor_coefficient: this.cor_coefficient,
in_cor_risk: this.in_cor_risk,
out_cor_risk: this.out_cor_risk,
cor_outline: this.cor_outline,
remark: this.remark,
}
}).then(res => {
console.log(res)
this.tableData = res.records
this.total = res.total

})
},
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val
},
下面是controller的

package com.jm.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jm.springboot.entity.User;
import com.jm.springboot.mapper.UserMapper;
import com.jm.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")//90端口无法直接访问user
public class UserController {
@Autowired
private UserService userService;
//新建、修改
@PostMapping
public boolean save(@RequestBody User user){
return userService.saveUser(user);
}
//查询所有数据
@GetMapping
public List findAll() {

    return userService.list();
}
@DeleteMapping("/{id}")
public boolean delete(@PathVariable Integer id) {
    return userService.removeById(id);
}
@PostMapping("/handleDelete/batch")
public boolean deleteBatch(@RequestBody List ids) { // [1,2,3]
    return userService.removeByIds(ids);
}
// 分页查询 - mybatis-plus的方式
@GetMapping("/page")
public IPage<User> findPage(@RequestParam Integer pageNum,
                            @RequestParam Integer pageSize,
                            @RequestParam(defaultValue = "") String username) {
    IPage<User> page = new Page(pageNum, pageSize);
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
    if (username.equals("")) {
    } else {
        queryWrapper.like("username", username).or().like("nickname", username)
                .or().like("nuclear_scu_level", username).or().like("spec_level",username)
                .or().like("seis_level",username).or().like("qua_level",username).or().like("part",username);

不知道什么原因请问有人来解答一下吗😭

解决思路：
1.vue debugger 一下，看你返回的对象中是否有数据
(没有则后端查询出现了问题， 定位sql是否正常。)
(后端返回数据正常，则就是vue中的table数据映射出现了问题 ， 查看对应字段是否正确。)
(
vue对应字段如果是正确的， 则查看vue中映射关键字是否有 ：例 映射关键字property:
el-table-column width="200" property="name" label="软件名称"
)
对了， 字段带有_下划线，你需要看一下，后端查询出来是否转义成了字母大写了 ，如果自动转义了out_media / outMedia ,这样的话， 前后端字段也会对应不上导致无法渲染值上去

示例代码有点糊，使用postman模拟请求一下看看数据是否正确。返回类型如果是json，还需要注意接收变量名是否规范

你在 网页上看一下返回的数据是不是和 前端的 变量名对应，大概率是变量名对不上

这个后端接口就没查出来东西吧？

看一下返回的数据是不是和 前端的 变量名对应，或者后台输出一下查询处理的数据

你输入路径查一下数据是否正确，如果正确说明前端的数据显示方式有问题

先后端debug看数据是否正常；
再网页上看后端返回数据是否正常；
再看前端变量名是否对应

那可以在postman测试下后台接口，看能不能正常反回数据

表中也没多少数据，很多为空的。看下接口返回的，如果返回了，那就是前端渲染问题了。

没有配置好相适合的板本

首先从截图中可以看出接口请求是正常的，我们排除网络层原因；
这个问题从经验上来看是前后端 key 值没对应上，我看像是用的el-table,不知道你的 columns 和 后端返回的recordData 能匹配上key值不

不是已经打印了response吗，看数据结构是否符合你的要求啊，还有你的get方法怎么会传递那么多参数
把response的结构发出来看一下，还有el-table-column的结构也发出来，否则看不出来

接口返回数据是对的的话，那就是你前端渲染的时候数据解析没对

controller的代码再往下粘点，应该是执行查询的时候没有查询null那些字段

table 中的列绑定的列名要和返回的数据保持一致，应该是这个问题

定位下前端还是后端问题