element UI-远程搜索（el-autocomplete）

1.需求

表单项（系统名称）需具有搜索功能

2.实现

<template>
    <div>
      <div>
        <div>
          <div>
            <el-form :inline="true" :model="formResult" ref="formResult" :rules="formRules" hide-required-asterisk label-position="right">
              <ul>
                <li>
                  <el-form-item label="系统名称" prop="SysName" label-width="80px">
                      <el-autocomplete
                        style="width: 160px"
                        v-model="formResult.SysName"
                        :fetch-suggestions="querySysName"
                        popper-class="select-option"
                        placeholder="请输入"
                        @select="handleSelectSysName"
                      >
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" :content="scope.item.value" placement="top-start">
                            <p>{{scope.item.value}}</p>
                          </el-tooltip>
                        </template>
                      </el-autocomplete>
                  </el-form-item>
                </li>
              </ul>
            </el-form>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'unlock',
  data () {
    return {
      formResult: {
        SysName: '' // 系统名称
      },
      formRules: {},
      sysNameList: [] // 系统名称展现列表
    }
  },
  methods: {
    // 选中系统名称
    handleSelectSysName (item) {
      this.formResult.SysName = item.code
      console.log('handleSelectSysName item::::::::')
      console.log(item)
    },
    // 计算系统名称
    querySysName (queryString, cb) {
      let timerSysName = null
      clearTimeout(timerSysName)
      timerSysName = setTimeout(() => {
        this.getSysName(cb)
      }, 200)
    },
    // 系统名称模糊查询
    getSysName (cb) {
      let SysName = this.formResult.SysName
      this.$axios({
        url: '接口地址',
        method: 'post',
        data: {
          'tradeMap': {
            'SysName': SysName
          }
        }
      }).then(res => {
        console.log(res)
        let data = res.data
        if (data.tradeMap.ResultCode === '00') {
          this.sysNameList = data.tradeMap.arrayList.map((item, index) => {
            return {
              code: item,
              value: item,
              text: item
            }
          })
          console.log('this.sysNameList:::::::')
          console.log(this.sysNameList)
          cb(this.sysNameList)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

3.后端返回结果示例 

{errorList:[]
serviceNode:""
shardFlag:false
storageMap:{}
tradeMap:{
    Message:"查询成功"
    ResultCode:"00"
    arrayList:["aaa", "bbb", "ccc", "sss"]
}}