el-autocomplete 使用 --模糊查询

    <el-form-item label="工序">
            <el-autocomplete placeholder=""
                             ref="el_auto"
                             v-model="searchForm.processName"
                             class="inline-input"
                             :fetch-suggestions="querySearch"
                             clearable
                             :debounce="10"
                             v-on:clear="clearSelect"
                             :popper-class="noData ? 'platform-auto-complete' : ''"
                             :popper-append-to-body="false"
                             :trigger-on-focus="true">
                <template v-if="noData" slot-scope="{ item }">
                    <div class="default">{{ item.default }}</div>
                </template>
            </el-autocomplete>
        </el-form-item>

Js部分代码：

 querySearch(queryString, callback) {
            var list = [];
            if (queryString && queryString.length > 0) {
                list = this.processNodeList.map(item => {
                    return {
                        id: `${item.id}`,
                        value: `${item.process_node_name}` //注意必须要用value,不然下拉框显示空白
                    }
                })
                list = list.filter(p => p.value.indexOf(queryString) > -1);
                if (list.length === 0) {
                    list = [{ default: '无匹配数据' }]
                    this.noData = true
                } else {
                    this.noData = false
                }
                callback(list);
            }
            else {
                list = this.processNodeList.slice(0, 10).map(item => {
                    return {
                        id: `${item.id}`,
                        value: `${item.process_node_name}`  
                    }
                });
                callback(list);
            }
        },
        handleSelect(item) {
            //console.log("item", item);
            this.searchForm.processId = item.id;
        },
        clearSelect() {
            this.$refs.el_auto.activated = true
        }

CSS 部分代码：

        .el-popper[x-placement^=bottom] {
            width: auto !important;
        }

        .platform-auto-complete {
            .el-autocomplete-suggestion__wrap
            {
                padding: 5px 0;
                pointer-events: none;
                .default{
                    text-align: center;
                    color: #999;
            }
            &:hover {
                background-color: #fff;
            }
            }
        }