Element-UI中Select选择器讲解（el-lect详解）
关于下拉框相关知识点总结
今天来整理⼀下⽬前最喜欢的el组件 el-lect:Element官⽹
最近真的做梦都是这个组件的相关属性clearable和filterable和对应的钩⼦函数@change，所以趁着整理下来吧以免夜长梦多
来我们⼀起学习⼀下element给我们提供的相关案例
<template>
<el-lect v-model="value" placeholder="请选择"><el-option v-for="item in options":key="item.value":label="item.label":value="item.value"></el-option> </el-lect>
</template>福田网页设计
<script>
export default{data(){return{ options:[{ value:'选项1', label:'黄⾦糕'},{ value:'选项2', label:'双⽪奶'},{ valu
e:'选项3', label:'蚵仔煎'},{ value:'选项4', label:'龙须⾯'},{ value:'选项5', label:'北京烤鸭'}], value:''}}
wen}
</script>
很容易发现我们遍历的是⼀个数组对象，其中显⽰出来的是label，但是真正对应的值却是value属性whatcha say
graphicdesigner
在项⽬中经常有这样的下拉框，让我们选择，有两种情况，⼀种下拉框是静态的，就是下拉框的数据是前端写好的，第⼆种更加有趣，是动态的，是从数据库中获取的
在我们实际开发过程中这个下拉框的属性⼤部分是由后台查询取到的，举个案例如下
我们显⽰出来的是name属性，但是当我们要做其它操作如查询的时候我们真正传给后台的是id值
{"content":[
{
"id":"001",
"name":"⾠兮",
adsa
},
{
"id":"002",撒切尔夫人 电影
"name":"⾠兮要努⼒",
},
{学士学位英语
"id":"003",
"name":"⾠兮打卡",
}
],
"count":3,
time bomb"code":"success",
"message":"成功"
}电位差
其实这⾥我们多实践也可以更好的了解⾯向对象编程这⼀个概念，JavaScript就是⼀个⾯向对象编程的语⾔，我们后台发送给前端的就是⼀个有⼀个数组对象，我们只是展⽰了其中对象中的某⼀个属性
来分析⼀下前端的思路
前端定义⼀个数组来接这个对象
options =[]
this.options = t;
如何取到值 v-for="item in options":key="item.id":label="item.name":value="item.id"
简单的总结⼀下 options相当于⼀个数组对象的集合，遍历出来显⽰的是具体的label，但是真实的值是value属性代表的
来分享⼀下最最最常⽤的属性，我⼀般都会加上，详情⼤家也参考官⽹即可⽐较基础
clearable 这个我们常⽤ 意思是可以清除
filterable 代表我们可以搜索，数据量⼤的时候我们进⾏相关操作
关于对应的钩⼦函数的应⽤案例：这个是内置的，我们改变某⼀个属性的时候我们⽬的就是获取它的值或者执⾏什么⽅法，这⾥⽤高考录取分数线2013
@change或者@remove-tag都是可以直接使⽤的，详情⼤家⾃⼰实践
remove-tag 代表：多选模式下移除tag时触发 /移除的tag值
如何使⽤@change @remove-tag
<el-lect v-model="value1" multiple @change="changeValue()" @remove-tag="deleteValue"><el-option v-for="item in content":key="item.sId":label="ite m.sName":value="item.sId"></el-option></el-lect>
