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

下拉组件select

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

首先分析一下：

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 的方式进行格式隐式转化。

最终的结果都是一样的。