Vue 3中基于下拉选择框实现数据筛选的技术问询

核心修改点 #

• 用计算属性实现数据筛选逻辑
• 动态生成下拉选项（避免硬编码，适配数据变化）
• 新增“全部”选项，支持一键重置筛选

修改后的完整代码 #

<script>
import countries from 'countries.json'

export default {
  data() {
    return {
      countries: countries,
      filter: ''
    }
  },
  computed: {
    // 按筛选值过滤数据
    filteredCountries() {
      if (!this.filter) {
        return this.countries
      }
      return this.countries.filter(item => item.language === this.filter)
    },
    // 提取唯一的语言/国家类型
    uniqueLanguages() {
      return [...new Set(this.countries.map(item => item.language))]
    }
  }
}
</script>

<template>
  <select name="filter" id="langFilter" v-model="filter">
    <option value="">全部</option>
    <option v-for="lang in uniqueLanguages" :key="lang" :value="lang">
      {{ lang }}
    </option>
  </select>

  <div class="table-responsive">
    <table class="table table-striped table-nowrap align-middle mb-0">
      <thead>
        <tr>
          <th scope="col">语言/国家</th>
          <th scope="col">名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredCountries" :key="index">
          <td>{{ item.language }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

代码说明 #

1. filteredCountries计算属性：
   • 筛选值为空时返回全部数据，选择具体语言时只展示匹配项
2. uniqueLanguages计算属性：
   • 通过Set对语言字段去重，自动生成下拉选项，后续数据更新无需手动修改模板
3. 下拉选项优化：
   • 新增“全部”选项，用户可快速重置筛选状态
   • 动态渲染选项，避免硬编码带来的维护成本

内容的提问来源于stack exchange，提问作者Halnex