控件代码：
<template>
<a-auto-complete v-if="type=='autocomplete'"
:data-source="dataSource"
:placeholder="placeholder"
:filter-option="filterOption"
@change="change"
@select="select"
allowClear
v-model="selId"
ref="auto"
option-label-prop="title"
>
<template slot="dataSource">
<a-select-option v-for="opt in dataSource" :key="opt.id" :title="opt.residentName + opt.phone">
<a-row>
<a-col :span="6">{
{
opt.residentName}}</a-col>
<a-col :span="6">{
{
opt.phone}}</a-col>
<a-col :span="6">{
{
opt.idCard}}</a-col>
<a-col :span="6">{
{
opt.communityName}}{
{
opt.buildingNo}}</a-col>
</a-row>
</a-select-option>
</template>
</a-auto-complete>
<a-input v-else-if="type=='input'" :placeholder="placeholder" @change="changeInput" v-model="selId" allowClear></a-input>
</template>
<script>
import {
getAction} from '@/api/manage'
//支持autocomplete和input两种格式
//type : autocomplete , input
export default {
name: "AutoResident",
model: {
prop: 'resident',
event: 'selResident'
},
props: {
placeholder: {
type: String, default: '请用姓名、拼音首字母、身份证号、电话号码快速查找'},
resident: {
type: Object, default: () => {
}
},
type: {
type: String, default: 'autocomplete'}
},
data() {
return {
dataSource: [],
selId: this.resident ? this.resident.id : '',
}
},
created() {
if (this.resident) {
this.dataSource.push(this.resident);
}
},
watch: {
resident(newVal) {
this.selId = newVal.id;
if (this.dataSource.length == 0) {
if (JSON.stringify(this.resident) != "{}") {
this.dataSource.push(this.resident);
}
}
}
},
methods: {
filterOption(input, option) {
let row = this.dataSource[this.dataSource.findIndex(f => f.id == option.key)];
return row.residentName.indexOf(input) >= 0
|| row.py.toUpperCase().indexOf(input.toUpperCase()) >= 0
|| row.phone.indexOf(input) >= 0
|| row.idCard.toUpperCase().indexOf(input.toUpperCase()) >= 0
// return this.pinyin.getCamelChars(option.componentOptions.children[0].text).toUpperCase().indexOf(input.toUpperCase()) >= 0;
},
change(value) {
if (value) {
this.list();
} else {
//输入框清空了，设置选择对象为空，清除数据源
this.$emit('selResident', {
});
this.dataSource = [];
this.$emit('onDataChange', this.dataSource);
}
},
select(value) {
let selObj = {
};
if (this.dataSource.length > 0) {
for (let i = 0; i < this.dataSource.length; i++) {
if (this.dataSource[i].id == value) {
selObj = this.dataSource[i];
break;
}
}
}
if (JSON.stringify(selObj) != "{}") {
this.$emit('selResident', selObj);
this.$emit('onSelect', selObj);
this.dataSource=[];
this.dataSource.push(selObj);
this.$emit('onDataChange',this.dataSource);//选择后的数据源只留下选择的这个数据
}
},
changeInput() {
this.list();
},
list() {
if (!this.selId) {
this.dataSource = [];
this.$emit('onDataChange', this.dataSource);
return;
}
if (this.dataSource.findIndex(f => f.id == this.selId) >= 0) return;//此时已是选择后，不用再查找了
let params = {
residentName: this.selId, pageSize: 30};
getAction('/hoscard/resident/list', params).then(res => {
if (res.success) {
this.dataSource = [];
for (let i = 0; i < res.result.records.length; i++) {
let item = res.result.records[i];
//赋值这几个可以不需要
item.value = item.id;
item.text = item.residentName;
item.label = item.residentName;
this.dataSource.push(item);
}
this.$emit('onDataChange', this.dataSource);
}
})
}
}
}
</script>
<style scoped>
</style>
重点是filterOption方法中的过滤，用option中key，在数据源中查找，符合条件的就返回true,change事件中用输入值向后台请求查询，结果返回后抛出 onDataChange事件，调用方可以在这个事件中使用数据源做其他事情。
option-label-prop=“title” 指定填充到select中的属性值，在选择后用于回填，下拉项是自定义的格式，显示多列数据。值 “title” 是指option的属性， ，如果不设置，默认是value
使用代码：
<auto-resident v-model="queryParam.resident" @onDataChange="residentDataChang"></auto-resident>
queryParam.resident 是一个对象。