Element的el-autocomplete

代码

页面

data

Search: {
  storeName: '', // 门店名称
  storeId: '', // 门店id
},
salesOrderShopArr: [], // 门店数组

methods

// 获取门店数据
QuerySalesOrderShop (queryString, cb) {
  util.publicpost('get', url, {}, function (res) { // 请求接口
    if (res.code === 0) {
      var results = []
      if (res.data !== null) {
        for (let i = 0, len = res.data.length; i < len; i++) {
          res.data[i].value = res.data[i].storeName;           
        }
        this.salesOrderShopArr = res.data
        results = queryString ? this.salesOrderShopArr.filter(this.createFilter(queryString)) : this.salesOrderShopArr;
      }         
      cb(results);          
    }
  });
},
createFilter(queryString, queryArr) {
  return (queryArr) => {
    return (queryArr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
},   

// 选择门店信息
handleSelectSalesOrderShop (item) {
  this.Search.storeId = item.storeId
},

注意点

从后台获取的数组要进行数据处理，为数组的每一个对象添加一个value属性，值为你想要显示的值, 因为autocomplete只识别value字段并在下拉列中显示。

文档

input中的autocomplete

网站导航

网站导航