[ element-ui ] select 开启远程搜索后, 数据量过多的交互优化

最新推荐文章于 2025-06-17 15:26:08 发布

付出总会有收获

最新推荐文章于 2025-06-17 15:26:08 发布

阅读量7.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_25835645/article/details/90401092

Vue 专栏收录该内容

7 篇文章

订阅专栏

博客指出下拉列表数据过多时，用户使用不便，远程搜索可解决此问题，但首次点开下拉列表因数据过多会卡顿约2秒，推测是dom渲染所致，作者将用暴力方法解决该交互问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉列表的数据如果过多的话, 用户用起来会十分麻烦, 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>

效果图 :

在这里插入图片描述