場景

在某管理系統(tǒng)中，需要對指定員工的指定月份的指定天設置為指定的狀態(tài)

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現(xiàn)

首先設計數(shù)據(jù)庫

?

依次添加d1到d31代表每月的1到31號，設置類型為varchar，存儲的是字符串類型。

然后生成相應的實體類和各業(yè)務層代碼，實體類屬性如下

?

然后在前端，選擇某條記錄點擊修改時

????????????? <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 = "修改月統(tǒng)計";});},

上面是根據(jù)選中的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="請勾選要設置的當月號數(shù)" 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="設置考勤狀態(tài)為:" prop="kqzt" label-width="300"><el-selectv-model="form.kqzt"placeholder="請選擇考勤狀態(tài)"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>

上面的輸入框用來顯示基本信息，下面是勾選要設置的每月幾號和要設置為的狀態(tài)

?

怎樣對這些個多選框進行初始化

??????????? <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>

使用多選框組，循環(huán)的是dates這個對象數(shù)組 ，綁定的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屬性，此屬性是數(shù)組。

????? form: {id: undefined,gh: undefined,xm: undefined,dabh: undefined,bm: undefined,year: undefined,mouth: undefined,checkList: [],kqzt: undefined,},

然后在點擊確定時會將此表單提交，并將form參數(shù)進行傳遞

????? <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參數(shù)傳遞給請求接口js的方法

export function updateKqyb(data) {return request({url: '/kqbb/kqyb',method: 'put',data: data}) }

然后傳遞到SpringBoot后臺

??? @PutMappingpublic AjaxResult edit(@RequestBody KqbbKqyb kqbbKqyb){}

使用后臺生成的實體類進行接收，因為傳遞的選中的月份的數(shù)組的在原實體類中不存在，所以需要新增

private String[] checkList;

屬性以及get和set方法來接受參數(shù)

然后接受到參數(shù)后是數(shù)組，每一項對應后臺實體類的屬性d1 d2這種

怎樣根據(jù)屬性名設置屬性值

先獲取要設置哪些天即要設置哪些屬性

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的反射，根據(jù)屬性名獲取屬性，再設置屬性可訪問然后調用set方法設置其值

field.set(kqbbKqybNew, kqzt+"(改)");

其中kqbbKqybNew是要設置屬性的對象，后面的參數(shù)是要設置的內容。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的SpringBoot+ElementUI实现多选设置一月中指定几天的属性，SpringBoot中通过反射实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。