Vue之checkbox多选框的实际应用

需求：打开弹窗后，给医生提供多选框用来选择人群属性，如果是选中的则状态为已勾选，否则是未勾选。确认后向后台提交，在其他界面显示该用户的属性；下次再打开时，则选中状态为已选的内容，医生可根据实际情况进行再次操作。

打开效果：

代码实现：

弹窗样式如下：

<div>
    <!--打开弹窗操作在表格中设置为按钮，可以读取到表格行的id，handleAddPeople(row)-->
	<el-dialog title="人群属性"
               :visible.sync="dialogAddPeople"
               width="40%">
      <el-form ref="addPeopleForm"
               :model="addPeopleForm"
               label-position="top">
        <el-form-item label="请选择当前用户的人群属性：">
          <el-checkbox-group v-model="check" @change="handleCheckChange">
            <el-checkbox class="el-checkbox-width" v-for="(people, index) in peoples" :value="people.dictValue" :label="people.dictLabel" :key="index" @change="handleValuesChange(people)">{{ people.dictLabel }}</el-checkbox>
          </el-checkbox-group>
          </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="cancel"
                   @click="dialogAddPeople = false">
          取消
        </el-button>
        <el-button type="primary"
                   @click="handleSuretoAddPeople">
          确认
        </el-button>
      </div>
    </el-dialog>
</div>

数据如下：

data() {
	return {
	  // 添加人群属性
      dialogAddPeople: false,
      peoples: [], // 存储人群属性
      check: [], // 存储label
      values: [], // 存储value
	  // 需提交的列表
      addPeopleForm:{
        crowdList:[
          {
            dictValue: null,
            dictLabel: null,
            patientId: null,
          }
        ],
        patientId: null,
      },
      patientId: null, //患者id
	}
}

方法如下：

methods: {
    // 查看人群属性操作
    handleAddPeople(row) {
      // 打开前置空
      this.peoples = [] // 存放人群属性数据
      this.check = [] // 存放label数据
      this.values = [] // 存放value数据
      this.dialogAddPeople = true;
      this.patientId = row.id // 根据当前行获取id
      searchPeopleAttribute({patientId: this.patientId}).then(response => {
        this.peoples = response.data;
        // console.log(this.peoples)
        // 把remark为selected的项存入，即存入当前已被选中的属性，下次打开后自动勾选
        // 判断存入这一步需写在内部，否则执行顺序出问题
        for (var i = 0; i < this.peoples.length; i++) {
          // console.log(this.peoples[i].remark)
          if (this.peoples[i].remark == 'selected') {
            this.check.push(this.peoples[i].dictLabel)
            this.values.push(this.peoples[i].dictValue)
          }
        }
        // console.log("initial_label",JSON.parse(JSON.stringify(this.check)))
        // console.log("initial_value",JSON.parse(JSON.stringify(this.values)))
      })
    },
    // 打印动态label数据
    handleCheckChange() {
      // console.log("dynamic_label",JSON.parse(JSON.stringify(this.check)))
    },
    // 打印动态value数据
    handleValuesChange(people) {
      if(this.values.indexOf(people.dictValue) == -1) {
        this.values.push(people.dictValue);
      }
      else {
        this.values.splice(this.values.indexOf(people.dictValue),1)
      }
      // console.log("dynamic_value",JSON.parse(JSON.stringify(this.values)))
    },
    // 提交设置人群
    handleSuretoAddPeople() { 
      // 获取查看患者的id
      this.addPeopleForm.patientId = this.patientId
      // 获取dictValue和dictLabel值
      // 根据后端的形式进行提交 
      for(var i = 0; i < this.check.length; i++) {
        const p = {}
        p.dictLabel = this.check[i].toString()
        p.dictValue = this.values[i].toString()
        p.patientId = this.patientId
        this.addPeopleForm.crowdList[i] = p 
      }
      // alert(JSON.stringify(this.addPeopleForm))
      modifyPeopleAttribute(this.addPeopleForm).then(() => {
        this.dialogAddPeople = false;
        this.$notify({
          title: "成功",
          message: "添加人群属性成功",
          type: "success",
          duration: 2000,
        });
      })
    },
}

axios接口如下：

import request from '@/utils/request'
// 查询人群属性
export function searchPeopleAttribute(query) {
  return request({
    url: '/patients/crowd/crowList',
    method: 'get',
    params: query
  })
}

// 修改人群属性
export function modifyPeopleAttribute(data) {
  return request({
    url: '/patients/crowd',
    method: 'post',
    data
  })
}

提交模拟数据如下：

{
	"patientId":1,
	"crowdList":[
  		{"dictLable":"高血压","patientId":1,"dictValue":"2"},
  		{"dictLable":"老年人","patientId":1,"dictValue":"1"},
  		{"dictLable":"糖尿病","patientId":1,"dictValue":"3"}
	]
}