封装人员组件并运用

被运用页面

 <input-person v-model="form.remark01" style="width: 220px"
                    placeholder="请输入" />
 import inputPerson from "@/components/inputPerson.vue";
 export default {
  components: {
    inputPerson, 
  },
   data() {
    return {
      form:{
        remark01:""
      },
      }
      }

inputPerson页面

<template>
  <div>
    <el-autocomplete
      v-model="value1"
      value-key="userName"
      :fetch-suggestions="querySearch"
      placeholder="请输入"
      :trigger-on-focus="false"
      style="width: 100%"
    >
      <i slot="suffix" class="el-input__icon el-icon-user-solid pointer" @click="choose" />
    </el-autocomplete>
    <el-dialog title="人员选择" :visible.sync="dialogTableVisible">
      <choose-person @person-select="personSelect" />
    </el-dialog>
  </div>
</template>
<script>
import choosePerson from './choosePerson'
import { GetAllUserInfos } from '@/api/insofworks'
import PinyinMatch from 'pinyin-match'

export default {  
  components: { choosePerson },
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      suggestions: null,
      dialogTableVisible: false,
    }
  },
  computed: {
    value1: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }
  },
  
  methods: {
    choose() {
      this.dialogTableVisible = true
    },
    personSelect(id, name) {
      this.value1 = name
      this.dialogTableVisible = false
    },
    querySearch(queryString, cb) {
      if (this.suggestions) {
        var results = queryString ? this.suggestions.filter(this.createFilter(queryString, 'userName')) : this.suggestions
        // 调用 callback 返回建议列表的数据
        cb(results)
      } else {
        GetAllUserInfos().then(
          res => {
            this.suggestions = res.data
            var results = queryString ? this.suggestions.filter(this.createFilter(queryString, 'userName')) : this.suggestions
            // 调用 callback 返回建议列表的数据
            cb(results)
          }
        ).catch(err => {
          console.log(err)
          cb([])
        })
      }
    },
    createFilter(queryString, key) {
      return (item) => {
        // return (item[key].toLowerCase().includes(queryString.toLowerCase()))
        return (PinyinMatch.match(item[key], queryString))
      }
    }
  }
}
</script>
<style scoped>

</style>