Vue.component('user-input', {
    model: {
        prop: 'user',
        event: 'select'
    },
    props: ['user'],
    data: function () {
        return {
            items: [],
            page: 1,
            rows: 50
        }
    },
    methods: {
        querySearchAsync: function (queryString, cb) {
            var p = {
                page: this.page,
                rows: this.rows,
                key: queryString
            };
            var that = this;
            var url = '/frame/findUser';
            $.post(url, p, function (res) {
                that.items = [];
                var ds = res.content;
                $.each(ds, function (i, v) {
                    that.items.push(v);
                });
                cb(that.items);
            });
        },
        handleSelect (item) {
            this.$emit('select', item);
        },
        handleClear(){
            this.$emit('select',{});
        }
    },
    template: '<el-autocomplete  class="inline-input"  v-model="user.name"\
                        :fetch-suggestions="querySearchAsync"\
                        :trigger-on-focus="true"\
                        :select-when-unmatched="true"\
                        @select="handleSelect"\
                        @clear="handleClear"\
                        placeholder="请输入用户名关键字，从下拉框中选择"  clearable size="mini">\
             <template slot-scope="{ item }">\
                <span style="float:left;">{{ item.name }}</span>\
                <span style="float:right;">{{item.id}}</span>\
             </template>\
            </el-autocomplete>'
});

注意点：
1、select-when-unmatched = true 输入回车后将引发select事件
2、v-model绑定的是user的name属性，选择后会显示出name，
3、调用方使用时，传入的v-model也是一个对象
4、在触发了clear事件后，传出一个空对象，否则调用方绑定的还是上一次选择的对象
调用示例：

<user-input v-model="frmUser.user"></user-input>

data中：

frmUser:{
                    show:false,
                    id:'',
                    user:{}
                }