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

1.需求

表單項（系統名稱）需具有搜索功能

2.實現

<template>
    <div class="publicBox">
      <div>
        <div class="main-content">
          <div class="content-top">
            <el-form :inline="true" :model="formResult" ref="formResult" :rules="formRules" hide-required-asterisk label-position="right" class="form-box">
              <ul class="flex-space-between">
                <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:["cap-app-service", "cip-app-service", "cloud-access-lp", "fppc-app-service"]
}}

4.效果展示