SpringBoot+ElementUI实现多选设置一月中指定几天的属性，SpringBoot中通过反射实现
程序员文章站
2022-04-08 14:48:53
...
场景
在某管理系统中，需要对指定员工的指定月份的指定天设置为指定的状态
注：
博客：
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="{ width: '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是要设置属性的对象，后面的参数是要设置的内容。
上一篇： 分享一个Android图片模糊的工具类