springboot+Elmentui+vue之el-select数据绑定

项目环境：springboot+vue+elementui前后端分离

问题简述：我在做多条件查询的时候，出现了下拉列表el-option中的值和el-select不能绑定的情况，因而导致不能正确查询，算是一个遗留问题，很开心，记录一下，希望可以给大家一些启发

---

一、项目截图

二、解决问题的关键

value-key :作为 value 唯一标识的键名，绑定值为对象类型时必填

（很明显，当el-select下拉列表绑定的值为对象类型时需要使用value-key）

三、vue端表单代码

多条件查询表单

<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
    <el-form-item label="姓名" prop="empName">
    <el-input placeholder="请输入姓名" style="width: 140px;" size="small"
    v-model="formInline.empName"></el-input>
    </el-form-item>
    <el-form-item label="账号" prop="account">
    <el-input placeholder="请输入账号" style="width: 140px;" size="small"
    v-model="formInline.account"></el-input>
    </el-form-item>
    <el-form-item label="角色" prop="empRoleId">
    <el-select v-model="formInline.empRoleId" placeholder="请选择角色" @focus="roleFocus"
    @change="
    (formInline.roleData.roleName)" size="small" style="width: 160px;"
    value-key="value">
    <el-option v-for="item in formInline.roleData"
        :key="item.roleId"
            :value="item.roleId"
                :label="item.roleName" size="small"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="部门" prop="department" size="small">
                    <el-select v-model="formInline.empDeptId" placeholder="请选择部门" @focus="deptFocus"
                    style="width: 160px;"
                    @change="deptChange(formInline.deptData.deptName)" value-key="value">
                    <el-option v-for="item in formInline.deptData" :key="item.deptId" :label="item.deptName"
                        :value="item.deptId"
                            ></el-option>
                            </el-select>
                            </el-form-item>
                            <el-button type="primary" round size="medium" @click="onsubmit('formInline')">查询</el-button>                        
                            </el-form>

大家可以看到我的代码中value-key="value"，为的是和el-option中的:value绑定，这样就可以把id传向后台，这样问题就解决了

下拉框options传值

/*角色下拉框*/
roleFocus() {
    const _this = this
    this.axios.get("http://localhost:8181/Role/getAllRoles")
        .then(function (resp) {
            _this.formInline.roleData = resp.data
        })
},
/*部门下拉框*/
deptFocus() {
    const _this = this
    this.axios.get("http://localhost:8181/Department/getAllDepts")
        .then(function (resp) {
            _this.formInline.deptData = resp.data
        })
},

多条件查询请求后台

onsubmit(formName) {
    const _this = this
        this.$refs[formName].validate((valid) => {
        if (valid) {
            //将object对象转化为json字符串
            var qs = require('querystring')
                axios.post("http://localhost:8181/Employee/allEmps/1/4/", qs.stringify(this.formInline)
                          ).then(function (resp) {
                _this.tableData = resp.data.list
                    _this.total = resp.data.total
            });
        } else {
            return false;
        }
    });
}

四、后台controller代码

@PostMapping("/allEmps/{page}/{size}")
public PageInfo<Employee> showAllEmployee(@RequestBody @PathVariable("page") int pageNo, @PathVariable("size") int pageSize, String empName, String account, Integer empRoleId, Integer empDeptId) {
    //定义分页格式
    PageHelper.startPage(pageNo, pageSize);
    // 执行查询所有员工方法
    List<Employee> allEmployee = employeeService.getAllEmployee(empName, account, empRoleId, empDeptId);
    //将员工按要求分页操作
    PageInfo<Employee> employeePageInfo = new PageInfo<Employee>(allEmployee);
    return employeePageInfo;
}

以上就是解决问题的思路，如有不完善还请各位见谅，我也会不断反思争取写的更好，互相学习，共同进步