解決Element 遠程搜索el-select 選項過多問題

Element 遠程搜索el-select，顯示特定條數，不會導致選項過多 ，導致頁面丑化。

 引用：

 

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

 

 

 

頁面代碼：

<div id="app">
        <el-select @@blur="hideMask" @@focus="showMask" @@visible-change="visibleChange($event)" @@change="selectChanged" style="width:100%;top:0;z-index:20000;margin-top:43px; position: fixed; _position: relative;" placeholder="門店快捷搜索"
                   v-model="contents"
                   filterable
                   remote
                   :remote-method="remoteMethod"
                   no-data-text="無匹配數據">
            <el-option v-for="item in regionDataList"
                       :key="item.id"
                       :label="item.value"
                       :value="item.value">
            </el-option>
            <div v-if="regionDataList.length > 14" class="search-keyword">
                <span style="margin-left:10%;font-size:15px;color:darkgrey">當前只顯示前15條結果，請完善搜索關鍵字</span>
            </div>
        </el-select>
    </div>

script：

 var app = new Vue({
        el: '#app',
        data:{
        contents: "",//值
        regionDataList: [],//渲染頁面的 區域選項數據
        region_DataList: [],//區域選項所有數據

    },
        //Element 遠程搜索組件
        setDistrict() {
        var jia = this;
        $.ajax({
            type: "Post",
            url: "/DashBoard/Region",
            success: function (res) {
                jia.region_DataList = res.Data // 先存一份完整的
                jia.regionDataList = res.Data.slice(0, 15) // 然后渲染到頁面上的是截取前面n條的
            }
        })
    },
        remoteMethod(query) {
            var jia = this;
            if(query !== '') {
                query = query.trim();
    jia.regionDataList = jia.region_DataList.filter(item => {
        return item.value.indexOf(query) > -1
    }).slice(0, 15) // 用戶搜索的時, 根據完整的列表來搜, 搜到的結果同樣截取前n條, 不足n條忽略
} else {
        jia.regionDataList = jia.region_DataList.slice(0, 15) // 關鍵字為空的時候又將完整的列表數據截取前n條渲染回去
    }
},
})

效果圖：

官方文檔：https://element.eleme.cn/#/zh-CN/component/select