Celestial572 2022-08-02 23:23 采纳率: 100%
浏览 197
已结题

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

后端数据发送是对的

img


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

img

vue代码
<el-table
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<Integer> 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);

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

  • 写回答

16条回答 默认 最新

  • 天天上天庭 2022-08-03 11:38
    关注

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

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

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 8月4日
  • 已采纳回答 8月4日
  • 赞助了问题酬金17元 8月2日
  • 赞助了问题酬金20元 8月2日
  • 展开全部

悬赏问题

  • ¥15 商城生产日期批次库存问题
  • ¥15 esp8266控制共阳极wrgb灯板无法关闭所有led灯
  • ¥100 python读取速度问题
  • ¥15 stm32f407使用DMA问题
  • ¥15 您好 这个API接口该怎么弄 网站搭建好了 API也有 现在就不知道该怎么填写API 不知道怎么用
  • ¥88 用uniapp写一个多端的程序,用到高德地图,用高德的JSAPI吗?
  • ¥20 关于#c++#的问题:水果店管理系统
  • ¥30 dbLinq最新版linq sqlite
  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle