[ element-ui ] select 开启远程搜索后, 数据量过多的交互优化_elementui 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

效果图 :