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

效果图：