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"
        ></el-autocomplete>
      </el-form-item>
     .................
     ...省略其他组件...
     .................
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        splitRules: [],
        dataForm: {
          id: 0,
          ruleName: '',
          mergeRuleList: [],
          sortRuleList: [],
          itemNumber: 20,
          pricePrecision: 2
        },
         .................
         ...省略其他变量...
         .................
        

    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) {
            this.splitRules = data.list
          } else {
            this.splitRules = []
            this.$message.error(data.msg)
          }
          callback(this.splitRules)
        })
      },
      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>

注意：el-autocomplete的下拉列表框默认显示元素中value属性的值，因此queryByRuleName查询到的集合元素中，需要将你想展示到下拉列表框的值命名为value。