antd中select下拉框值为对象选中的问题

最新推荐文章于 2023-11-24 12:22:09 发布

一只叮code的小蚊子

最新推荐文章于 2023-11-24 12:22:09 发布

阅读量1.3w

点赞数

分类专栏： react vue学习文章标签： antd中select下拉框 select下拉框为对象 react中使用select vue中使用select

本文链接：https://blog.csdn.net/ZJW222/article/details/103204115

版权

本文探讨了在antd的React应用中，当Select下拉框的值为对象时遇到的问题及解决方案。在处理选中状态和避免浏览器警告方面，通过设置`labelInValue`和同时指定`value`与`key`属性得以解决。另外，针对弹窗中Select组件可能出现的位置偏移问题，使用`getPopupContainer`方法可以有效防止。在Vue项目中使用Element-UI时，类似的问题也存在，并给出了相应的处理记录。

摘要由CSDN通过智能技术生成

使用antd中的select下拉框，遇到个小问题，后台管理系统中，使用下拉框，一般不会是简单的就直接使用select中的value值，而是会使用id或者value中文对应的keyword，并且这个在option中的value值也是可能重复的

1.效果图

2.select相关代码

我这里用的是react

let list = [
    {
      title: '普通会员',
      id: 1
    },{
      title: '测试专用人员',
      id: 2
    }, {
      title: '测试专用人员',
      id: 3
    }
];
let currentEditOption: {
    roleId: '',
    title: '',
};

<Select
  value={currentEditOption.title}
  style={
  {width: '70%'}}
  suffixIcon={<Icon type="caret-down"/>}
>
  {
    list.map((item:any) =>
      <Option key={item.id} value={item.title}>{item.title}</Option>
    )
  }
</Select&g