antd Select自定義下拉選項和回填

選中後，選擇框值僅顯示區間名稱

const items = [
    {code: 201, text: 'text1 code'},
    {code: 202, text: 'text2 code'},
    {code: 203, text: 'text3 code'},
    {code: 204, text: 'text4 code'},
    {code: 205, text: 'text5 code'},
    {code: 206, text: 'text6 code'},
]

// 以下是函數元件中，傳回的select部分jsx
 <Form.Item  rules={[{required}]}    name='code'  label='select'  >
          <Select
                    className={style['specila']}
                    popupClassName={style['pop-cc']}
                    style={{width: 200}}
                    placeholder="custom dropdown render"
                    defaultValue={205}
                    dropdownRender={(menu) => {
                        return (<>
                            <div style={{display: 'flex', justifyContent: 'space-between', padding: '0 10px'}}>
                                <div>區間名稱</div>
                                <div>區間編碼</div>
                            </div>
                            <Divider style={{margin: '8px 0'}}/>
                            {menu}
                        </>)
                    }}
                    optionLabelProp="title"  //使用 optionLabelProp 指定回填到選擇框的 Option 屬性。
                >
                    {
                        items.map((item: {code: number, text: string}, index: number) => (
                            <Option key={index} value={item.code} title={item.text} >
                                <span style={{float: "left"}}>{ item.text }</span>
                                <span style={{float: 'right'}}>{ item.code }</span>
                            </Option>
                        ))
                    }
                </Select>      
 </Form.Item>