element ui的select选择框

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

  
                
                
                
  


 data() {
        return {
           
            select: '',
           
        },
 methods: {
 
        changeSelect() {
            console.log(this.select);
        }
      
    }

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

  
                
            

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

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

       
                
            

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

  
                
            


data() {
        return {
  users:[{
                label:'小刘',
                card:1234
            },{
                label:'小高',
                card:1235
            },{
                label:'小李',
                card:1236
            },{
                label:'小张',
                card:1237
            }]
}
    },

element ui的select选择框_第2张图片

你可能感兴趣的:(ui,vue.js,前端,javascript,elementui)