[ element-ui ] select 開啓遠程搜索後, 數據量過多的交互優化

下拉列表的數據如果過多的話, 用戶用起來會十分麻煩, 100多條的數據, 總不能讓用戶一直往下拉去找她要的那條, 所以遠程搜索就用上了, 用戶一直輸入關鍵字, 一直匹配. 但是如果是第一次點開下拉列表, 數據過多會導致2秒鐘的卡頓, 姑且是dom渲染引起的, 筆者下面就用一個比較暴力的方法來解決這個交互.

<el-select 
    v-model="form.F_ADDR_LANE"
    filterable
    remote
    :remote-method="remoteMethod"
    :disabled="!form.F_ADDR_DISTRICT"
    no-data-text="無匹配數據"
    placeholder="請選擇路牌">
         <el-option 
            v-for="item in roadDataList"
            :key="item.DM"
            :label="item.MC"
            :value="item.DM"></el-option>
          <div v-if="roadDataList.length > 49"  class="search-keyword">
            <span>只顯示前50條結果，請完善搜索關鍵字</span>
          </div>
</el-select>

...

<script>
...

export default {
    data () {
        return {
            form: {
               F_ADDR_LANE: '',
               F_ADDR_DISTRICT: ''
            },
            roadDataList: [],
            roadDataList_: []
            // 列表數據如下: [{DM: "4419000933037", MC: "主山大井頭六街一橫巷"}, [{DM: "4419000933038", MC: "主山大井頭六街二橫巷"}]
        }
    },
    create: {
        this.setDistrict()
    },
    methobs: {
        async setDistrict () {
            const data = await getAdd()
            if(data) {
                this.roadDataList_ = data.data // 先存一份完整的
                this.roadDataList = data.data.slice(0, 50) // 然後渲染到頁面上的是截取前面50條的
            }
        },
        remoteMethod(query) {
          if (query !== '') {
            this.roadDataList = this.roadDataList_.filter(item => {
              return item.MC.indexOf(query) > -1
            }).slice(0, 50) // 那麼用戶搜索的時候, 根據完整的列表來搜, 搜到的結果同樣截取前50條, 不足50條忽略即可
          } else {
            this.roadDataList = this.roadDataList_.slice(0, 50) // 關鍵字爲空的時候又將完整的列表數據截取前50條渲染回去
          }
        }
    }
}
</script>
<style>
.search-keyword {
    text-align: center;
    padding: 3px 0;
    color: #ccc;
    font-size: 13px;
}
</style>

效果圖 :