可输入的下拉框

项目场景:

可输入的下拉框_第1张图片


问题描述

可以输入的下拉框,在element-ui中 可以找到的是 input 组件 中-带输入建议 的可以达到效果

可输入的下拉框_第2张图片

 当是下拉框时,匹配输入的值与下拉框的数据,如果可以匹配,那么就选择那条,如果不能匹配那么,保留输入的值


分析:

可以输入的下拉框,既可以是 下拉框 又可以是 输入框,所以,它可以绑定输入框的change事件又可以绑定下拉框的select事件


实例:

1:html部分


    

2:js部分

// 收款单位 带输入建议 的方法
querySearch(queryString, callback) {
   let restaurants = this.yiFangDanWeiList;
   let results = queryString ? 
        restaurants.filter(this.createFilter(queryString)) : 
        restaurants;
   callback(results);// 调用 callback 返回建议列表的数据
},
createFilter(queryString) {
   return (restaurant) => {
     return (
          restaurant.value.toLowerCase().indexOf(
            queryString.toLowerCase()
          ) === 0
     );
   };
},

// 当输入选择框  为输入框时  的方法
changeIpt(val){
   this.addPayOffForm.payee=val;
},


// 当输入选择框  为选择框时  的方法
selectVal(val){
   this.addPayOffForm.payee=val.value;
,

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