vue+ elementUI使用el-autocomplete從遠程實時查詢

頁面需求如下：第一步，在“預製模板”中輸入模板名，需要從數據庫模糊查詢出數據集，第二步，選中某條數據後，將對應的其他數值填入“合併方式”等其他項目中。

<template>
  <el-dialog
    :title="'箱單發票創建設置'"
    append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="預置模板" prop="ruleName">
        <el-autocomplete
          class="inline-input"
          v-model="dataForm.ruleName"
          :fetch-suggestions="queryByRuleName"
          placeholder="預置模板"
          @select="handleSelect"
          size="mini" style="width: 500px"
        ></el-autocomplete>
      </el-form-item>
     .................
     ...省略其他組件...
     .................
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
         .................
         ...省略其他組件...
         .................
        

    methods: {
         .................
         ...省略其他方法...
         .................
      queryByRuleName (queryString, callback) {
        this.$http({
          url: this.$http.adornUrl('/bg/splitRule/query'),
          method: 'post',
          params: this.$http.adornParams({
            'ruleName': queryString
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.list)
            this.splitRules = data.list
          } else {
            this.splitRules = []
            this.$message.error(data.msg)
          }
          callback(this.splitRules)
          this.dataListLoading = false
        })
      },
      handleSelect (item) {
        if (item.mergeRule !== null && item.mergeRule.length > 0) {
          this.dataForm.mergeRuleList = item.mergeRule.toString().split(';')
        }
        if (item.sortRule !== null && item.sortRule.length > 0) {
          this.dataForm.sortRuleList = item.sortRule.toString().split(';')
        }
        this.dataForm.id = item.ruleId
        this.dataForm.itemNumber = item.itemNumber
        this.dataForm.pricePrecision = item.pricePrecision
      }
    }
  }
</script>