背景需求

下面先看一下需求：\

游戏端，有一个一键关闭游戏数据过滤的按钮。

直接加:

   <el-select v-model="searchData.status" filterable placeholder="请选择" @change="gamefilter" class="mr40">
            <el-option label="开启" :value='0'></el-option>
            <el-option label="关闭" :value='1'></el-option>

            <!-- <el-option label="关闭" :value='1'> -->

            
   </el-select>

这一句就够了，数组对象生成，下拉也没问题，接下来就是通过@change事件进行增强功能的开启，也很简单。

参数说明：

el-option

参数	说明	类型	可选值	默认值
label	显示值，可选	string
value	真实值	string
remark	额外信息，将显示在右边	string
disabled	禁用	boolean	true, false	false

当然，这个组件还可以通过设置属性searchData.status，可以通过后台接口渲染整个下拉组件。只要 el-select的v-model的值与 el-option的lable 或 value 相等就可显示出来了。

更多使用

如果我们在el-select选中的时候,不仅仅只拿到一个id,而是想拿到一个对象,并且这个对象中有我们需要的数据.只需要增加一个行间属性:value-key 即可。

比如发起团战，这里可以用el-select,:value的时候把整个item都传进去渲染一个好友列表,用value-key接收就会传给change事件。

代码如下：

   <el-select v-model="searchData.status" :loading="itemListLoading" value-key="item" class="control" placeholder="请选择" @change="handleItem">
            <el-option v-for="(item,idx) of itemList" :key="idx" :label="item.userName" :value="item"/>
   </el-select>

总结

这个技术点更多是应用的展示，把功能过滤使用el-select组件，更多内容参考在ele的官方文档！

就写到这里

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

vue绑定数字类型 value为数字

el-select的选择以后返回对象实现方法

背景需求

el-option

更多使用