修改組件el-select默認展示id不展示label


1.起初,錯誤的結果,角色直接展示的是id值,因為el-select會根據id自己匹配對應的中文label

2.我想做成效果是,

3.檢查前端代碼,沒有問題

        <el-form-item label="角色" prop="RoleId">
          <el-select v-model="editManagerForm.RoleId"  placeholder="請選擇管理員的角色 " >
            <el-option :label="item.Title" :value="item.ID" v-for="(item, index) in roleList" :key="item.ID"></el-option>
          </el-select>
        </el-form-item>

4.參照網上篇博客園后,找到了問題,是數據庫格式問題,v-model中需要number類型值,我從后端接口拿到的是string類型,前端需要轉換一下

https://blog.csdn.net/m0_47733490/article/details/120063226

但是后端也是自己寫的,改后端接口快很多,我直接修改后端,默認返回Id為uint類型,就可以顯示了;

如果需要前端解決,需要把v-model="editManagerForm.RoleId" 里面值轉換為number類型

{
    "data": {
        "Manager": {
            "CreatedAt": "2021-12-07T13:59:20.101+08:00",
            "UpdatedAt": "2021-12-07T14:05:50.162+08:00",
            "DeletedAt": null,
            "ID": 18,
            "Username": "劉成強17",
            "Password": "$2a$10$H3doCfJyI8WdEBp9M4OcMu7Bn7zRs9Hblziei09AYVhsEJWru1dpC",
            "Mobile": "18328632045",
            "Email": "454905970@qq.com",
            "Status": "1",
            "IsSuper": "",
            "RoleId": 2,
            "Role": {
                "CreatedAt": "2021-12-07T13:57:18.203+08:00",
                "UpdatedAt": "2021-12-07T13:57:18.203+08:00",
                "DeletedAt": null,
                "ID": 2,
                "Title": "技術開發",
                "Description": "技術開發的描述",
                "Status": "1"
            }
        },
        "countManager": 1
    },
    "meta": {
        "msg": "查詢管理員信息成功",
        "status": 200
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM