场景

在某管理系统中，需要对指定员工的指定月份的指定天设置为指定的状态

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先设计数据库

 

依次添加d1到d31代表每月的1到31号，设置类型为varchar，存储的是字符串类型。

然后生成相应的实体类和各业务层代码，实体类属性如下

 

然后在前端，选择某条记录点击修改时

              <el-buttonsize="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-selectv-model="form.kqzt"placeholder="请选择考勤状态"clearable:style="{ width: '300px' }"><el-optionv-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后台

    @PutMappingpublic 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是要设置属性的对象，后面的参数是要设置的内容。

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的SpringBoot+ElementUI实现多选设置一月中指定几天的属性，SpringBoot中通过反射实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。