element ui的select选择框

我们首先先试一下，这个东西怎么玩的

  <el-select v-model="select" @change="changeSelect"><el-option value="香蕉"></el-option><el-option value="菠萝"></el-option><el-option value="苹果"></el-option></el-select>data() {return {select: '',}，methods: {changeSelect() {console.log(this.select);}}

这样就能用了，然后我们加一些属性

  <el-select v-model="select1" @change="changeSelects"><el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.card"></el-option></el-select>

我发现这个绑定的两个属性很关键，只要用好label和value这两个属性就可以实现一个效果，我们平时可能需要选择用户，然后获取它的身份证号，然后我们只需要让用户选择名字，这样在后台我们可以拿到他的身份证号！label是选项的标签，如果不写就是默认和value一样，如果写了就是现实label的值，然后value就是，返回的值，这样就可以实现这个效果了选择名字，拿到id

接着继续介绍两个属性叫multiple和filterable就是多选和可搜索，多选这个直接放入里面即可

       <el-select v-model="select1" @change="changeSelects" multiple><el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.card"></el-option></el-select>

着重说一下filterable，为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。也就是说，我们的data传入的数组里面是要有label属性的，这样就可以实现模糊查询操作

  <el-select v-model="select1" @change="changeSelects" filterable><el-option v-for="item in users" :key="item.id" :label="item.label" :value="item.card"></el-option></el-select>data() {return {users:[{label:'小刘',card:1234},{label:'小高',card:1235},{label:'小李',card:1236},{label:'小张',card:1237}]
}},