Springboot+Elementui+Vue之el-select对象属性绑定 springboot

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

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

一、项目截图

Springboot+Elementui+Vue之el-select对象属性绑定

文章图片

二、解决问题的关键

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

（很明显，当el-select下拉列表绑定的值为对象类型时需要使用value-key）
三、vue端表单代码 【Springboot+Elementui+Vue之el-select对象属性绑定】多条件查询表单

查询

大家可以看到我的代码中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 = https://www.it610.com/article/resp.data }) }, /*部门下拉框*/ deptFocus() { const _this = this this.axios.get("http://localhost:8181/Department/getAllDepts") .then(function (resp) { _this.formInline.deptData = https://www.it610.com/article/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 = https://www.it610.com/article/resp.data.list _this.total = resp.data.total }); } else { return false; } }); }

四、后台controller代码

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