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
            }]
}
    },
相关推荐
LaughingZhu1 小时前
PH热榜 | 2025-04-26
前端·数据库·人工智能·mysql·开源
萌萌哒草头将军7 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫17 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中7 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊8 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿8 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj8 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝8 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3119 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion9 小时前
数组转树:数据结构中的经典问题
前端