element ui的select选择框

liuyang___2025-02-26 18:27

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

复制代码

  <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
            }]
}
    },