修改组件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