elementui checkbox使用 以及结合后台 回显

页面：

前端：

  <el-col :span="24">
            <el-form-item label="办公环境" prop="officeEnvironment">
              <el-checkbox-group v-model="form.officeEnvironment">
                <el-checkbox v-for="(item,index) in officeEnvironmentList " :key="item.dictValue" :label="item.dictValue">
                  {{ item.dictLabel }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
  </el-col>

数据结构：

  form: {
        officeEnvironment: [],
      }

参数类型：将数组转为字符串，后台用string类型接受

  editSubmit(form) {
      const data = JSON.parse(JSON.stringify(this.form))
    //  将数组转换为string类型的字符串保存到后台，用逗号分割
      data.officeEnvironment = data.officeEnvironment.toString()
      this.$refs[form].validate((valid) => {
        if (valid) {
          updateOrganizationInfo(data).then(resp => {
            if (resp.code === 200) {
              this.msgSuccess('修改成功')
              this.getList()
              this.dialogEditVisible = false
            }
          }).catch(() => {
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

这里选择的是餐饮和住宿，对用的数字就是1，2

后台：
控制层：

vo:该字段使用string类型

数据库中：

这样保存到库里面的就是用逗号分割开的字符串，前端回显时指需要用逗号分割就好

前端回显：

 /** 编辑按钮操作 */
    handleEdit(row) {
      this.form.deptName = row.deptName
      this.form.id = row.id
      // 查询
      selectOrganizationInfoInfo(this.form.id).then(resp => {
        if (resp.code === 200) {
          this.form = resp.data
          this.form.isEvection = resp.data.isEvection != null ? resp.data.isEvection.toString() : ''
          this.form.isDifferentRecruitment = resp.data.isDifferentRecruitment != null ? resp.data.isDifferentRecruitment.toString() : ''
          // 判断是否为空 ，不是则用split分割开
          this.form.officeEnvironment = resp.data.officeEnvironment != null ? resp.data.officeEnvironment.split(',') : []
          this.dialogEditVisible = true
        }
      })
    },

回显效果：

再看table表格的回显：

因为客户要求显示的时候用逗号分割，所以我写了一个方法

  <el-table-column
                prop="officeEnvironment"
                label="办公环境"
                width="250"
              >
                <template slot-scope="props">
                  <span> {{ props.row.officeEnvironment ==null ?'--': officeEnvironmentTable(props.row) }}</span>
                </template>
              </el-table-column>

在methods中调用这个方法：

methosd:{jofficeEnvironmentTable(row) {
 // 1先分割，将string字符串转换为数组，
 //2 遍历办公环境字典数据
 // 3 判断字典值的value是否与data中的数值相等，若相等则加到value中
 //4遍历完 value中就是所有value对应的中文，然后用substr方法将首位逗号截取
 //5 返回value
      const data = row.officeEnvironment.split(',')
      var value = ''
      for (let i = 0; i < this.officeEnvironmentList.length; i++) {
        debugger
        for (var z = 0; z < data.length; z++) {
          if (this.officeEnvironmentList[i].dictValue === data[z]) {
            value += this.officeEnvironmentList[i].dictLabel + ','
          }
        }
      }
      return value.substr(0, value.length - 1)
    }
  }

描述有误的地方欢迎大家指正，大家有问题可加qq 876942434。一起进步~