先说下需求,
1、el-table的单元格不仅要能点击,而且需要显示后台数据(由于我保存的是数字形式到后台,但是展示到前端时需要将这些数字翻译成对应的中文),下面的是一个简单的实现方法
测试一
测试二
测试三
{{ scope.row.zhengjuselect }}
实现的效果图,证据这一栏可以点击
2、点击完单元格出现dialog弹框,然后勾选相应的信息,点击保存就可以啦
测试1
测试2
测试3
取 消
确 定
效果图:
以上的各种方法的代码
data() {
return {
AddzhengjuInfoForm: {},
zhengjuInfoData: [],
}
}
AddzhengjuInfo(row) {
this.AddzhengjuInfoForm = row
this.AddzhengjuInfodialogFormVisible = true
},
AddzhengjuInformation() {
// this.$refs['AddzhengjuInfoForm'].validate((valid) =>{
console.log(this.AddzhengjuInfoForm.id + "id++++++++++++++++++++++++++++++")
// })
this.AddzhengjuInfodialogFormVisible = false
let data = this.zhengjuInfoData.join(",")
console.log(data)
request.get("/WES/savezhengjuSelectInformation", {
params: {
id: this.AddzhengjuInfoForm.id,
zhengjuselect: data
}
}).then(res => {
console.log(res)
})
// console.log(row.id)
},
后台返回的数据主要是这个函数
load() {
request.get("/WES/page", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
zhengju: this.zhengju,
zhengjuselect: this.zhengjuselect,
}
}).then(res => {
this.tableData = res.records
this.total = res.total
this.tableData.forEach((index) => this.disableArr.push({isDisable: false}));
this.tableData.forEach((index) => this.disableArr1.push({isDisable: false}));
})
},
springboot后端的两个接口的代码:
@GetMapping("/page")
public IPage SelectByPage(@RequestParam Integer pageSize,
@RequestParam Integer pageNum,
@RequestParam String chr,
@RequestParam String start) {
IPage page = new Page(pageNum, pageSize);
QueryWrapper WesdeafnessEntityQueryWrapper = new QueryWrapper();
if (!"".equals(chr)) {
WesdeafnessEntityQueryWrapper.like("chr", chr);
}
if (!"".equals(start))
WesdeafnessEntityQueryWrapper.like("start", start);
WesdeafnessEntityQueryWrapper.orderByDesc("id");
return wesDeafnessService.page(page, WesdeafnessEntityQueryWrapper);
}
@GetMapping("/savezhengjuSelectInformation")
public WesdeafnessEntity savezhengjuSelectInformation(@RequestParam Integer id,
@RequestParam String zhengjuselect){
UpdateWrapper wrapper = new UpdateWrapper();
wrapper.set("zhengjuselect",zhengjuselect).eq("id",id);
int result = wesDeafnessMapper.update(null,wrapper);
WesdeafnessEntity entity = wesDeafnessMapper.selectById(id);
// String zhengju = entity.getZhengju();
//根据ID查出这些数据,然后回传给前端,前端在进行相应展示
return entity;
}
最后也顺便说下这个一个单元格显示多行数据是如何实现的,很简单直接看代码
{{ scope.row.genotype }}
{{ scope.row.depth }}
{{ scope.row.vaf }}
效果图: