vue2 element-ui选择器多选搜索时过滤失效

最新推荐文章于 2024-01-09 16:09:38 发布

gpchjyo

最新推荐文章于 2024-01-09 16:09:38 发布

阅读量588

点赞数 3

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gpchjyo/article/details/134294500

版权

vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题

最近在vue2中使用element-ui的el-select选择器时发现多选和搜索功能同时启用的时候会出现过滤了的结果被重置的情况，话不多说，上代码。

<template>
<div style="margin: 0px 10px 0px 5px">
    <el-select v-model="selectedCities" multiple collapse-tags filterable style="margin-left: 20px;">
        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</div>
</template>

<script>
export default {
    data() {
        return {
            selectedCities: [],    
            cities: [{
                value: "dalian",
                label: "大连"
            }, {
                value: "daqing",
                label: "大庆"
            }, {
                value: "beijing",
                label: "北京"
            }],
        }
    }
}
</script>

在搜索"大"时，会筛选出两个结果：

可是当我选择大连后，北京却重新回到了列表中，用户肯定不会接受每选择一个筛选项就要重新筛选的情况。

在官方文档中，也没有提供搜索和多选同时启用的案例，el-select在实现时动态生成了一个ul列表，通过设置 display:none 隐藏不符合筛选条件的<li>，在选择一个筛选结果后<li>的状态会被复原，这一块逻辑我尝试了很多遍也没能找到直观的修改方式，只能曲线救国。我的思路是通过搜索功能的input组件绑定事件去动态更新一张过滤后的list filteredCities，通过直接修改el-option循环的list来固定住过滤结果。

解决方案

先上完整代码

<template>
<div style="margin: 0px 10px 0px 5px">
    <el-select v-model="selectedCities" multiple collapse-tags filterable @focus="onDropdownInputFocus" ref="selectDropdown" style="margin-left: 20px;">
        <el-option v-for="item in filteredCities" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</div>
</template>

    
<script>
export default {
    data() {
        return {
            filteredCities: [],
            selectedCities: [],
            searchValue: "",
            cities: [{
                value: "dalian",
                label: "大连"
            }, {
                value: "daqing",
                label: "大庆"
            }, {
                value: "beijing",
                label: "北京"
            }],
        }
    },
    methods: {
        onDropdownInputFocus() {
            // 当input失去焦点时，过滤条件失效，重新显示所有结果
            this.$refs.selectDropdown.$refs.input.blur = () => {
                this.filteredCities = this.cities
                this.searchValue = ""
            };
            // 当我们在input中输入筛选条件时，筛选词会在每一次案件后被更新，
            // 这里我们手动对原始列表进行filter，更新el-option列表
            this.$refs.selectDropdown.$refs.input.onkeyup = () => {
                this.searchValue = this.$refs.selectDropdown.$refs.input.value
                this.filteredCities = this.cities.filter(
                    (x) =>
                    !this.searchValue.length ||
                    x.label.toLowerCase().includes(this.searchValue.toLowerCase()),
                )
            };
        },
    },
    mounted() {
        // 绑定时filteredCities就是完整的cities
        this.filteredCities = this.cities
    }
}
</script>

整体思路是我们新建一个列表filteredCities去记录过滤后的结果，el-option也从这个列表中就进行过滤，初始化结果时没有过滤条件，过滤后列表就是原列表。el-select有focus和blur事件，触发条件如下。

但是这里有一个坑就是el-select自带的blur事件触发范围特别小，这之后我们需要走一个后门在focus事件中手动注册el-select__input的blur事件。当失去焦点时，我们移除过滤条件，过滤列表就是完整列表。同时我们手动注册了一个el-select__input的onkeyup事件，在我们每一次在搜索框键入时都会对完整列表手动进行filter。

最后效果如下，选中后也不会出现不符合搜索词的结果啦！