下拉框实现选择不同值后边展示button按钮，且总宽度不变

下拉框想实现如下效果：

选择自定义时，下拉框后边出现按钮，且总长度不变

最开始想到的就是布局，row组件或者动态style根据类型判断width，但是我发现这些方式，要不复杂，要不无法自适应不同的屏幕分辨率，不能算是完全解决问题。最终最简单的解决方式如下：

最简单的实现方式：
html代码：

<FormItem label="选择类型" prop="codeType">
      <div class="select-type">
            <Select v-model="formValidate.codeType" label-in-value placeholder='请选择语言类型' @on-change='selectCodeType'>
                <Option v-for="item in codeTypeList" :value="item.value" :key="item.value">{
    
    {
    
     item.label }}</Option>
            </Select>
            <span v-show="formValidate.codeType == 5"><Button  style="margin: 0 5px">进入自定义</Button></span>
        </div>
</FormItem>

// data：
codeTypeList: [
   {
    
     value: 1, label: 'Java' },
   {
    
     value: 2, label: 'Vue' },
   {
    
     value: 3, label: 'python' },
   {
    
     value: 4, label: 'go' },
   {
    
     value: 5, label: '自定义' }
 ],

重点来了:

.select-type {
    
    
	     width: 100%;
	     display: flex; // 重点
   }

只需设置为flex,即可自动实现上述效果，实现长度自适应。

end~

希望记录的问题能够帮助到你 ~啾咪