vue element-plus input请求接口远程搜索

/**
* @Author: 858834013@qq.com
* @Name: labelList
* @Date: 2022-05-25
* @Desc: autocomplete远程搜索
*/
<template>
  <div class="labelList">
    <el-autocomplete
      :fetch-suggestions="querySearch"
      placeholder=""
      v-model="name"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
import { labelFindList } from '@/api/user'

export default {
  name: 'labelList',
  components: {},
  props: {
    enumerationValue: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      list: [],
      name: ''
    }
  },
  watch: {
    enumerationValue () {
      this.getList()
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleSelect (item) {
      this.name = ''
      if (this.list.length < 3) {
        this.list.push(item)
      } else {
        this.$message.error('最多可添加3个标签')
      }
    },
    // 搜索(模糊搜索)
    querySearch (queryString, cb) {
      if (queryString !== '') {
        this.getPlanTypeData(queryString, (data) => {
          let results = ''
          if (queryString && !data[0].noId) {
            // 输入框有值且有匹配数据时
            results = data.filter(this.createFilter(queryString))
          } else {
            // 没有匹配数据时显示自定义的字段
            results = data
          }
          cb(results)
        })
      }
    },
    createFilter (queryString) {
      return (restaurant) => {
        // 后台已做筛选,不需再过滤
        return restaurant.value
      }
    },
    // 获取数据
    async getPlanTypeData (val, fun) {
      // var that = this
      const dataArr = []
      labelFindList({
        name: val,
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        if (res.code === 200) {
          var dataList = res.data.list
          if (dataList.length > 0) {
            dataList.forEach((item, index) => {
              dataArr.push({
                value: item.name,
                name: item.id
              })
            })
          } else {
            dataArr.push({
              value: '未找到相关结果',
              noId: '未找到相关结果'
            })
          }
          fun(dataArr)
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
.enumeratedValuesList {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  width: 480px;
  height: 50px;
  background: #EDEDED;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #ACACAC;
  padding-left: 20px;

  .tag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    height: 50px;
  }
}

.labelList {
  width: 500px;
}

.tips {
  width: 500px;
  text-align: right;
  font-size: 18px;
  font-family: Heiti SC-Light, Heiti SC;
  font-weight: 300;
  color: #7D7D7D;
  margin-bottom: 23px;
  margin-top: 11px;
}

.labels {
  height: 50px;
  background: #FFFFFF;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  border: 1px solid #ACACAC;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  overflow: hidden;
  width: 500px;

  img {
    width: 24px;
    height: 24px;
    margin-left: 22px;
    margin-right: 10px;
  }

  :deep(.el-autocomplete) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input__wrapper) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    font-size: 24px;
    resize: none;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    height: 50px;
    width: 400px;
    outline: none;
    line-height: 50px;
    border: none;
    resize: none;
    box-shadow: none;
  }
}

.tag {
  font-size: 24px;
  font-family: Heiti SC-Light, Heiti SC;
  font-weight: 300;
  color: #245EDC;
  margin-right: 10px;

  img {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
}

</style>