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="请输⼊姓名" size="small"
v-model="pName"></el-input>
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input placeholder="请输⼊账号" size="small"
v-model="formInline.account"></el-input>
</el-form-item>
<el-form-item label="⾓⾊" prop="empRoleId">
<el-select v-model="pRoleId" placeholder="请选择⾓⾊"@focus="roleFocus"
@change="
(leName)" size="small"
value-key="value">
<el-option v-for="item leData"
:key="leId"
:value="leId"
:label="leName" size="small"></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门" prop="department" size="small">
<el-select v-model="pDeptId" placeholder="请选择部门"@focus="deptFocus"
@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
("localhost:8181/Role/getAllRoles")
.then(function (resp) {
_leData = resp.data
})
},
/*部门下拉框*/
deptFocus() {
const _this = this
("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("localhost:8181/Employee/allEmps/1/4/", qs.stringify(this.formInline)
).then(function (resp){
_this.tableData = resp.data.list
_al = al
});
}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 = AllEmployee(empName, account, empRoleId, empDeptId);
//将员⼯按要求分页操作vuejson转对象
PageInfo<Employee> employeePageInfo =new PageInfo<Employee>(allEmployee);
return employeePageInfo;
}
以上就是解决问题的思路，如有不完善还请各位见谅，我也会不断反思争取写的更好，互相学习，共同进步

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。