element ui 下拉组件的实现select option 字符串与数值的转化小技巧

忘是亡心i 2021-07-25 22:43 1544阅读 0赞

## 下拉组件select ##

在后台管理系统中，下拉组件往往作为检索或者创建内容时，一个非常重要的组件存在。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
首先分析一下：

1.  一般select 中有多个option可供选择，这个option的来源可以是从接口获取，也可以是自定义的数据。一般给到的数据，大多数都是对象，也有可能是数组。
2.  select组件的结果是跟option的value是绑定的。value的数据类型是数值，而有些时候给到你的数据类型是字符串，此时就需要做处理才可以实现。

如上图所示，实现如上效果，需要进行下面的操作。

#### 界面 ####

<el-select
    // v-model 是select组件绑定的数据，我这个数据是放在listQuery对象的param属性的bannerType属性中的。
       v-model="listQuery.param.bannerType"
       // clearable 代表 select选择组件可以清空选择
       clearable
       // style 代表 select选择组件的样式，设置宽度及右侧间距
       style="width: 200px;margin-right:20px;"
       // 很多组件都可以使用 filter-item的class类名
       class="filter-item"
       // placeholder 默认展示的提示信息，如果是字符串，其实是可以简化成 placeholder="请选择banner类型" 也就是，如果绑定的是字符串，可以去掉属性前面的: bind标识
       :placeholder="'请选择banner类型'" >
       // option 中是v-for渲染的数据 
       <el-option v-for="(item,key) in bannerTypeMap" :key="key" :label="item" :value="key * 1" />
     </el-select>

bannerTypeMap可以是数组也可以是对象，下面分别给出格式类型

**bannerTypeMap数组的形式**

bannerTypeMap:[
    	{ 
    		id:0,
    		name:"app应用内页"
    	},{ 
    		id:1,
    		name:"url"	
    	},{ 
    		id:2,
    		name:"三方应用"	
    	}
    ]

如果是如上的数组，则可以通过以下的渲染方式：  
`<el-option v-for="(item,key) in bannerTypeMap" :key="key" :label="item.name" :value="item.id"`

这样做的好处是：`el-option`中的value格式本身就是数值，跟数组中每一项的Id格式保持一致，无论是数据回填还是选择后进行提交，都是可以保证数据格式都是数字的。

**bannerTypeMap对象的形式**

bannerTypeMap:
    	{ 
    		0："app应用内页"，
    		1："url"，
    		2："三方应用"
    	}

如果是如上的对象，则可以通过以下的渲染方式：  
`<el-option v-for="(item,key) in bannerTypeMap" :key="key" :label="item" :value="key * 1"`

一定要注意，对象中的属性名是字符串格式，即便是你自己定义的对象写成上面的形式，属性名依然是字符串，而在option组件中的value需要是数字，否则页面渲染或者数据回填都会出现不能识别的情况，此时可以通过 \* 1 的方式进行格式隐式转化。

最终的结果都是一样的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/f498e20a57bd442b803e5f0f22f5ae78.png