When using the select drop-down box in antd, there is a small problem. In the background management system, the use of the drop-down box will not simply use the value value value in select, but will use the keyword corresponding to the id or value in Chinese, and the value value value in option may be repeated
1. effect picture
2.select related codes
- I use react here
let list = [ { title: 'Ordinary member', id: 1 },{ title: 'Special test personnel', id: 2 }, { title: 'Special test personnel', 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>
- Dropdown events
handleSelect = (value:any, option: any) => { console.log(value) /* option The whole object corresponding to option is returned */ console.log(option) };
- At this point, there is no problem, but once there are two items in the list with the same title field, the browser will give a warning
Warning: Encountered two children with the same key, `.$Special test personnel`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
- According to my understanding, the select drop-down box should detect the key value instead of the value value value. However, after I set the key value, the value value value will still be detected
- Of course, you can remove the value setting here. It can also realize the pull-down selection. onchang can get the corresponding data. But what I want to realize is that when there is a selected value in the select, the corresponding value in the option option should be in the selected state.
- Then, I tried many times, and set the property optionLabelProp. It's useless. At the beginning, I also set the labelInValue. However, the value I passed in is not an object, which caused me to give up the setting of the labelInValue property when I started trying, and then try again. I found that it's OK. In addition, at this time, I don't need to set the value value in option, but only set the value in option Just set the key
<Select labelInValue value={{key: currentItem.roleId, label:currentItem.title}} style={{width: '70%'}} onChange={handleSelect} suffixIcon={<Icon type="caret-down" />} getPopupContainer={(triggerNode: any) => triggerNode.parentNode} > { list.map((item:any) => <Option key={item.id}>{item.title}</Option> ) } </Select>
- Selection event of drop-down box
/* Define drop-down box selection */ handleSelect = (value:any, option: any) => { /* At this point, the value value is an object */ console.log(value) /* option The whole object corresponding to option is returned */ console.log(option) };
3. Position offset of option component
- When select is used in the pop-up component, when clicking the select component, the original page will scroll after the drop-down option appears, and the drop-down option and the select box will be separated
- At this time, we can use official methods to prevent position deviation
- Add the method getpopupcontainer = {triggernode = > triggernode. Parentnode} to select
4. When using element UI in vue, it also occurs that the value value is an object
- When using the option value of element UI drop-down box in vue project as an object, an error is reported
- In this article, I recorded vue
Studying hard. If it helps your study, leave your mark