SpringBoot+ElementUI实现多选设置一月中指定几天的属性，SpringBoot中通过反射实现

场景

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

注：

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