Springboot+Elementui+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;
}

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