element-ui的el-autocomplete组件（带建议的输入框）根据输入进行提示，并在以特定符号分割时重新提示

需求

我这里需要对用户输入的内容进行提示，然后用户输入了特定的分割符号时，重新匹配提示

遇到的问题以及解决问题方法

这个组件本身是点击某个建议就将对应的value直接赋值给v-model绑定的值，所以不符合现在的需求，这里赋的值需要更改为“最后一个分割符号及其之前的值 + 所点击的建议项的值”。
解决的方法是在返回建议项的方法中（fetch-suggestions），给每一个建议项添加一个msg的属性用于存储输入框中应该展示的值，之后在点击建议项的回调函数中（select）将msg的值赋值给v-model绑定的值，由于这里组件已经进行完了对v-mode绑定的值的赋值，所以这样就覆盖掉了组件的默认赋值操作。

代码

<el-autocomplete 
	type="textarea" 
	placement="bottom" 
	:fetch-suggestions="querySearchAsync" 
	@select="clickSelect" 
	rows="3" 
	placeholder="请输入您的意见" 
	v-model="msg">
</el-autocomplete>

export default {
	data(){
      return{
        userOpinions: [], // 用户常用意见
        msg: "", // 输入框内容
        formAddOpinions: {opinion: ''},
      }
    },
    created(){
      // 获得用户常用意见
      this.userOpinions = this.loadAll();
    },
    methods:{ 
    	// 模拟获取建议，正常应请求后台
        // 该组件默认显示的建议值就是value，如果你的不一样需要在组件上设置value-key
        loadAll() {
          return [
            { "value": "同意"},
            { "value": "拟同意"},
            { "value": "已阅"},
            { "value": "请审批"},
            { "value": "不同意"},
            { "value": "已收到" },
            { "value": "请修改预算信息"},
            { "value": "阶段处理"},
            { "value": "固定驳回"},
            { "value": "不同意且退回"},
            { "value": "审批通过"},
            { "value": "建议同意"},
            { "value": "通过"},
          ];
        },
    	// 返回输入建议的方法
        querySearchAsync(queryString, cb) {
          let userOpinions = this.userOpinions;
          // 经过修改后的字符串
          let changeQueryString = this.segmentation(queryString,[",","，","。","\n"]);
          // 通过过滤方法获得应该提示的建议结果数组
          let results = changeQueryString ? userOpinions.filter(this.createStateFilter(changeQueryString)) : userOpinions;
          // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
          results.map((item,index)=>{
            results[index].msg = item.value !== changeQueryString ? queryString.slice(0,queryString.lastIndexOf(changeQueryString)) + item.value : queryString
          });
          // 模拟异步请求，之后通过callback返回显示的建议数组
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 3000 * Math.random());
        },
        // 接受用户输入的值以及分割符号，返回最后一个指定分割符号后的值
        segmentation(queryString,arr){
          arr.map(item =>{
            queryString = queryString.slice(queryString.lastIndexOf(item)+1)
          });
          return queryString
        },
        // 返回一个过滤方法
        createStateFilter(queryString) {
          return (state) => {
            return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        // 用户点击建议时触发，对输入框进行赋值，值为点击的选项对应的msg属性
        clickSelect({msg}) {
          this.msg = msg
        }
      }
    }