vue el-form中添加el-checkbox多选框，实现将所选内容保存到后台，并能回显到前端的解决（如果有更好的方法欢迎评论）

 先说下需求，

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 }}
            
          

效果图：