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>

着重说一下filterableel-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
            }]
}
    },
相关推荐
LaoZhangAI2 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
cypking9 分钟前
解决 axios get请求瞎转义问题
vue.js
向阳25617 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd20 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI21 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见22 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特23 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~27 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪27 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡28 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试