:::demo 示例

```html
<template>
    <!--autoComplete基本用法-->
    
    <div>
        <v-autocomplete
        :field="field"
        :placeholder="placeholder"
        :componentName="componentName"
        :showLabel="showLabel"
        :width="width"
        @query="query"
        >
        </v-autocomplete>
    </div>

</template>

<script>

import data from '../../mock/tableData.js';
import Vue from 'vue';

//注册全局组件
Vue.component("custom-template",{
    template:`<div>
        <span>姓名:{{itemData.name}}</span>-<span>性别:{{itemData.gender}}nickname:{{itemData.nickname}}生日:{{itemData.birthday}}兴趣:{{itemData.hobby}}</span>
    </div>`,
    props:{
        itemData:{
            type:Object
        }
    }
});


export default {
    name:'custom',
    data(){
        return {
            field:"name",
            placeholder:"请输入查询关键字",
            data:data,
            componentName:"custom-template",
            width:200
        };
    },
    methods:{
        //模拟查询数据
        query(value,callback){
            let filterData=[];
            if(value){
                this.data.forEach(function(item){
                    if(item["name"].toString().indexOf(value)>-1){
                        filterData.push(item);
                    }
                });
            }
            callback(filterData);
        },
        showLabel(itemData){
            return `姓名:${itemData.name}-性别:${itemData.gender}`;
        }
    }
}

</script>

```
:::