el-autocomplete选中后在原有文字上进行追加而非替换

项目中有一个根据输入公式的需求,当用户输入 , . { [ (   这些特殊符号后,会返回一个数组,用于提示用户快捷输入,但是公式可能太长,返回值就只能带提示的那一部分,而并非全部,例如:

公式为 : ${Global.Plan.Units(//).Count}>0 

当用户输入     ${Global.    时返回一个数组    [{tip:'Plan'}],

假设用户直接选中那么v-model中绑定的值就会变成Plan了,

需求当用户选钟plan时,是在${Global.的基础上进行追加,而并非直接替换

图1选中前

图2选中后

 

思路:用到了solt插槽

// template
<el-autocomplete
  v-model="ele.exp"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  value-key="newTip"
  :trigger-on-focus="false"
>
  <template slot-scope="{ item }">
    <div>{{ item.fulltip }}</div>
  </template>
</el-autocomplete>

//data
restaurants: [
  {
     tip: "Plan",
     fulltip: "Plan : {}",
  },
  {
      tip: "aws",
      fulltip: "Real : {}",
  },
  {
      tip: "Config(p1).aaw",
      fulltip: "Config(p1)",
  },
  {
      tip: "Configs(p1)",
      fulltip: "Configs(p1)",
  },
],

//methods
querySearch(queryString, cb) {
   // , (  [  { . 监测特殊符号
   let len = queryString.length;
   const a = queryString.lastIndexOf(",") == len - 1;
   const b = queryString.lastIndexOf("(") == len - 1;
   const c = queryString.lastIndexOf("[") == len - 1;
   const d = queryString.lastIndexOf("{") == len - 1;
   const e = queryString.lastIndexOf(".") == len - 1;
   if (a || b || c || d || e) {
      var results = this.restaurants;
      // 给数据新增一个newTip字段,然后value-key时绑定新的字段,而slot插槽中插入的是显示的值,所以虽然显示的是fulltip,但是当选中的时候,其实绑定的是newTip字段
      results.map(item => {
         item.newTip = `${queryString}${item.tip}`
      })
      // 调用 callback 返回建议列表的数据
         cb(results);
    } else {
         cb([]);
   }
},

 仅提供思路,业务需求不同,使用方法也不同,在本项目中此方法可以正常使用