element Autocomplete 的使用

Vue.component('grade-input', {
    data: function () {
        return {
            items: [],
            value: '',
            page: 1,
            rows: 50,
            timeout: null
        }
    },
    methods: {
        handleSelect: function (item) {
            if(item.grade){
                this.$emit('selectgrade', item.grade);
            }else{
                this.$emit('selectgrade', item.value);
            }
        },
        querySearchAsync:function(queryString, cb) {
            var p = {
                page: this.page,
                rows: this.rows,
                grade: queryString
            };
            var that = this;
            $.post('/query/ListGradeNew', p, function (res) {
                that.items = [];
                $.each(res.data.rows, function (i, v) {
                    v.value = v.grade.toString();
                    that.items.push(v);
                });
                cb(that.items);
            });
        },
        handleBlur: function (event) {
            this.$emit('selectgrade', this.value);
        }
    },
    template: '<el-autocomplete class="inline-input" v-model="value" \
                             v-bind:fetch-suggestions="querySearchAsync"  \
                             v-bind:trigger-on-focus="true" placeholder="請輸入"  \
                             v-bind:select-when-unmatched="true"  \
                             v-on:select="handleSelect" \
                             v-on:blur="handleBlur"\
                             clearable style="width:100px;" size="mini">\
            </el-autocomplete>'
})

注意點：
1、 從後端獲取到列表後，如果沒有字段value，需手工加上這個字段，如果沒有這個字段，將不能正常顯示下拉內容
2、select-when-unmatched = true 輸入回車後將引發select事件
3、blur 事件，在失去焦點時觸發，即使沒有從下拉中選擇，也沒有在輸入後回車，也可以向父組件拋出輸入的內容。