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;
}

以上就是解決問題的思路，如有不完善還請各位見諒，我也會不斷反思爭取寫的更好，互相學習，共同進步