二次封装 ant-design-vue 的 auto-complete 自动补全组件

最近项目中用到了jeecg-boot低代码平台，照猫画虎也封装了一个联想输入的组件，代码如下：

JAutoComplete.vue 组件内容：

<template>
  <a-auto-complete
    :value="inputVal"
    :data-source="list"
    :placeholder="placeholder"
    @select="onSelect"
    @change="onChange"
  />
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: () => '请输入'
    },
    dataSource: { // 数据源
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      required: false
    },
  },
  computed: {
    inputVal() {
      return this.value !== null ? this.value : undefined
    }
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    onSelect(value) { // 选中一个
      this.$emit("input", value) // 回显给业务中的数据
    },
    onChange(value) {
      this.$emit("input", value) // 回显给输入框中显示，回显给业务中的数据
      this.list = []

      if (value) {
        this.dataSource.forEach(item => { // 模糊匹配列表中的内容
          if (item.indexOf(value) !== -1) {
            this.list.push(item)
          }
        })
      }
    },
  },
};
</script>

自定义组件：

import JAutoComplete from './JAutoComplete.vue'
Vue.component('JAutoComplete', JAutoComplete)

业务中使用就非常简单啦，只需要绑定一个数据和传入 dataSource 联想的数据源即可，可以是写死的也可以是后台获取的数据奥~

<j-auto-complete
  placeholder="请输入名称"
  v-model="queryParam.sensorName"
  :dataSource="sensorNameList"
  style="width: 120px;">
</j-auto-complete>

data() {
  return {
    queryParam: {
      sensorName: ''
    },
    sensorNameList: ['FC1', 'FC2', 'FC3', 'FC4'], // 联想的传感器名称
  }
}

下图是项目中用到的：