场景
在某管理系统中，需要对指定员工的指定月份的指定天设置为指定的状态
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先设计数据库
依次添加d1到d31代表每月的1到31号，设置类型为varchar，存储的是字符串类型。
然后生成相应的实体类和各业务层代码，实体类属性如下
然后在前端，选择某条记录点击修改时
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button>
调用handleUpdate方法
handleUpdate(row) { this.reset(); const id = row.id || this.checkedId; getKqyb(id).then((response) => { this.form.id = response.data.id; this.form.xm = response.data.xm; this.form.gh = response.data.gh; this.form.dabh = response.data.dabh; this.form.bm = response.data.bm; this.form.year = response.data.year; this.form.mouth = response.data.mouth; this.open = true; this.title = "修改月统计"; }); },
上面是根据选中的id查询出要设置的员工的信息以及设置的是哪一年的哪个月，然后将隐藏的修改的dialog进行显示
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="10"> <el-form-item label="工号:" prop="gh"> <el-input v-model="form.gh" :disabled="true" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="姓名:" prop="gh"> <el-input v-model="form.xm" :disabled="true" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="10"> <el-form-item label="部门:" prop="bm"> <el-input v-model="form.bm" :disabled="true" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="档案编号:" prop="dabh"> <el-input v-model="form.dabh" :disabled="true" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="10"> <el-form-item label="年:" prop="year"> <el-input v-model="form.year" :disabled="true" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="月:" prop="mouth"> <el-input v-model="form.mouth" :disabled="true" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="20"> <el-form-item label="请勾选要设置的当月号数" label-width="200"></el-form-item> </el-col> </el-row> <el-row> <el-col> <el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange"> <el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox> </el-checkbox-group> </el-col> </el-row> <el-row> <el-col> <el-form-item label="设置考勤状态为:" prop="kqzt" label-width="300"> <el-select v-model="form.kqzt" placeholder="请选择考勤状态" clearable :style="{ '300px' }" > <el-option v-for="dict in kqztOptions" :key="dict.bbmc" :label="dict.jqmc" :value="dict.bbmc" /> </el-select> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog>
上面的输入框用来显示基本信息，下面是勾选要设置的每月几号和要设置为的状态
怎样对这些个多选框进行初始化
<el-checkbox-group v-model="form.checkList" @change="handleCheckedDatesChange"> <el-checkbox v-for="date in dates" :label="date.key" :key="date.key">{{date.label}}</el-checkbox> </el-checkbox-group>
使用多选框组，循环的是dates这个对象数组 ，绑定的label属性就是此多选框的值，即勾选后获取到的内容，要显示的内容
是通过{{}}来显示，显示的是每个对像的label属性即实际要显示的值。
因为每月每天的对象属性是固定的，所以将dates声明
dates: dateOptions,
然后声明并赋值dateOptions
const dateOptions = [ { key: "d1", label: "1号", }, { key: "d2", label: "2号", }, { key: "d3", label: "3号", }, { key: "d4", label: "4号", }, { key: "d5", label: "5号", }, { key: "d6", label: "6号", }, { key: "d7", label: "7号", }, { key: "d8", label: "8号", }, { key: "d9", label: "9号", }, { key: "d10", label: "10号", }, { key: "d11", label: "11号", }, { key: "d12", label: "12号", }, { key: "d13", label: "13号", }, { key: "d13", label: "13号", }, { key: "d14", label: "14号", }, { key: "d15", label: "15号", }, { key: "d16", label: "16号", }, { key: "d17", label: "17号", }, { key: "d18", label: "18号", }, { key: "d19", label: "19号", }, { key: "d20", label: "20号", }, { key: "d21", label: "21号", }, { key: "d22", label: "22号", }, { key: "d23", label: "23号", }, { key: "d24", label: "24号", }, { key: "d25", label: "25号", }, { key: "d26", label: "26号", }, { key: "d27", label: "27号", }, { key: "d28", label: "28号", }, { key: "d29", label: "29号", }, { key: "d30", label: "30号", }, { key: "d31", label: "31号", }, ];
声明位置
这样在勾选后就会将所勾选的多选框的label属性对应的值绑定在改多选组的v-model绑定的属性。
绑定的是form对象的checklist属性，此属性是数组。
form: {
id: undefined,
gh: undefined,
xm: undefined,
dabh: undefined,
bm: undefined,
year: undefined,
mouth: undefined,
checkList: [],
kqzt: undefined,
},
然后在点击确定时会将此表单提交，并将form参数进行传递
<div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div>
在提交按钮对应的方法中
submitForm: function () { this.$refs["form"].validate((valid) => { if (valid) { if (this.form.id != undefined) { updateKqyb(this.form).then((response) => { if (response.code === 200) { this.msgSuccess("修改成功"); this.open = false; this.getList(); } }); } } }); },
将form参数传递给请求接口js的方法
export function updateKqyb(data) { return request({ url: '/kqbb/kqyb', method: 'put', data: data }) }
然后传递到SpringBoot后台
@PutMapping public AjaxResult edit(@RequestBody KqbbKqyb kqbbKqyb) { }
使用后台生成的实体类进行接收，因为传递的选中的月份的数组的在原实体类中不存在，所以需要新增
private String[] checkList;
属性以及get和set方法来接受参数
然后接受到参数后是数组，每一项对应后台实体类的属性d1 d2这种
怎样根据属性名设置属性值
先获取要设置哪些天即要设置哪些属性
String[] checkList = kqbbKqyb.getCheckList();
然后
KqbbKqyb kqbbKqybNew = new KqbbKqyb(); kqbbKqybNew.setId(kqbbKqyb.getId()); for (String shuxing:checkList) { Field field = kqbbKqybNew.getClass().getDeclaredField(shuxing); if(field!=null) { field.setAccessible(true); if(kqzt!=null) { field.set(kqbbKqybNew, kqzt+"(改)"); } } } kqbbKqybService.updateKqbbKqyb(kqbbKqybNew);
声明一个要设置属性的对象，赋予修改时要用到的id，然后遍历传递过来的所有属性
利用JDK的反射，根据属性名获取属性，再设置属性可访问然后调用set方法设置其值
field.set(kqbbKqybNew, kqzt+"(改)");
其中kqbbKqybNew是要设置属性的对象，后面的参数是要设置的内容。