ElementUI 自动补全

<template>
  <uid-panel @uid-list-event="uidListChangeEvent" :page-title="pageTitle">
    <el-form :inline="true">
      <el-form-item label="道具id">
          <el-autocomplete v-model='itemId' :fetch-suggestions="querySearchItem" @select="handleSelect"></el-autocomplete>
      </el-form-item>
      <el-form-item label="重置数量为">
        <el-input v-model='num' type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="setItemNum()">重置</el-button>
      </el-form-item>
    </el-form>
  </uid-panel>
</template>

<script>
import UidPanel from '../../components/UidPanel'
import PackService from '../../service/itemService'

export default {
  name: 'SetItem',
  data () {
    return {
      uidList: [],
      pageTitle: '',
      itemId: '',
      num: 0,
      itemConfigs: []
    }
  },
  components: { UidPanel },
  created () {
    if (this.$route.query.hasOwnProperty('pageTitle')) {
      this.pageTitle = this.$route.query.pageTitle
    }
    this.listItemConfig()
  },
  methods: {
    async listItemConfig () {
      const { data } = await PackService.listItemConfig()
      let msg = this.$apiResponse(data)
      if (msg !== false) {
        this.itemConfigs = msg
      }
    },
    uidListChangeEvent (uidList) {
      this.uidList = uidList
    },
    async setItemNum () {
      if (this.uidList.length <= 0) {
        alert('玩家id未输入!')
        return
      }
      if (this.itemId <= 0) {
        alert('道具id未输入!')
        return
      }
      const { data } = await PackService.setItemNum(this.uidList, this.itemId, this.num)
      let msg = this.$apiResponse(data)
      if (msg !== false) {
        confirm('修改成功')
      }
    },
    handleSelect (item) {
      this.itemId = item.id.toString()
    },
    querySearchItem (queryString, cb) {
      let results = queryString ? this.itemConfigs.filter(this.createFilter(queryString)) : this.itemConfigs
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (itemConfig) => {
        return itemConfig.value.toLowerCase().match(queryString) || itemConfig.id.toLowerCase().match(queryString)
      }
    }
  }
}
</script>

<style scoped>

</style>