使用済みページ
<input-person v-model="form.remark01" style="width: 220px"
placeholder="请输入" />
import inputPerson from "@/components/inputPerson.vue";
export default {
components: {
inputPerson,
},
data() {
return {
form:{
remark01:""
},
}
}
入力個人ページ
<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
cb(results)
} else {
GetAllUserInfos().then(
res => {
this.suggestions = res.data
var results = queryString ? this.suggestions.filter(this.createFilter(queryString, 'userName')) : this.suggestions
cb(results)
}
).catch(err => {
console.log(err)
cb([])
})
}
},
createFilter(queryString, key) {
return (item) => {
return (PinyinMatch.match(item[key], queryString))
}
}
}
}
</script>
<style scoped>
</style>