巧用Element UI的el-select解决多个下拉列表共享备选数据难题

2023-11-08 09:25:55

前言

在日常开发中，我们经常会遇到需要使用多个下拉列表来展示备选数据的情况。然而，当这些下拉列表共享相同的备选数据时，就会出现一个问题：当我们在一个下拉列表中搜索或筛选数据时，其他下拉列表中的数据也会受到影响。这显然是不合理的，也违背了用户体验的设计原则。

为了解决这个问题，我们可以使用Element UI的el-select组件提供的filterable属性和filter-method属性。通过这两个属性，我们可以实现自定义的搜索功能，从而使得每个下拉列表都可以独立地进行搜索和筛选，互不影响。

实现思路

首先，我们需要在el-select组件上设置filterable属性为true，以启用搜索功能。然后，我们可以通过传入一个filter-method（Function）来实现自定义的搜索功能。这个filter-method函数接收两个参数：第一个参数是当前输入的搜索内容，第二个参数是备选数据列表。我们可以在这个函数中对备选数据列表进行过滤，并返回符合搜索条件的数据列表。

举个例子，假设我们有一个下拉列表，备选数据是一个水果列表。现在，我们想要实现一个搜索功能，当用户输入“苹”字时，下拉列表中只显示包含“苹”字的水果，比如“苹果”和“菠萝”。我们可以使用如下代码来实现这个搜索功能：

<el-select v-model="selectedFruit" filterable :filter-method="filterFruits">
  <el-option
    v-for="fruit in fruits"
    :key="fruit.id"
    :label="fruit.name"
    :value="fruit.id"
  />
</el-select>

<script>
export default {
  data() {
    return {
      fruits: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '菠萝' },
        { id: 4, name: '橘子' },
        { id: 5, name: '葡萄' },
      ],
      selectedFruit: null,
    }
  },
  methods: {
    filterFruits(value, fruits) {
      return fruits.filter(fruit => fruit.name.indexOf(value) !== -1)
    }
  }
}
</script>