当前位置：首页 > VUE

vue实现城市列表排序

2026-01-20 00:05:55VUE

Vue 实现城市列表排序

数据准备

确保城市数据以数组形式存储，每个城市对象包含名称或其他排序依据的字段。例如：

data() {
  return {
    cities: [
      { name: '北京' },
      { name: '上海' },
      { name: '广州' },
      { name: '深圳' }
    ]
  }
}

按字母排序

使用 JavaScript 的 sort() 方法结合 localeCompare 实现中文字符排序：

methods: {
  sortCities() {
    this.cities.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'))
  }
}

分组排序（热门城市优先）

通过添加分组标识实现分组排序逻辑：

vue实现城市列表排序

data() {
  return {
    cities: [
      { name: '北京', group: 'hot' },
      { name: '上海', group: 'hot' },
      { name: '广州', group: 'A' },
      { name: '深圳', group: 'B' }
    ]
  }
}

methods: {
  sortCities() {
    this.cities.sort((a, b) => {
      if (a.group === 'hot') return -1
      if (b.group === 'hot') return 1
      return a.name.localeCompare(b.name, 'zh-Hans-CN')
    })
  }
}

使用计算属性

通过计算属性实现实时排序效果：

computed: {
  sortedCities() {
    return [...this.cities].sort((a, b) => 
      a.name.localeCompare(b.name, 'zh-Hans-CN')
    )
  }
}

添加索引栏

结合 DOM 操作实现右侧字母索引栏交互：

vue实现城市列表排序

<template>
  <div class="index-bar">
    <span 
      v-for="char in indexChars" 
      @click="scrollTo(char)"
    >{{ char }}</span>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTo(char) {
      const el = document.getElementById(`group-${char}`)
      el?.scrollIntoView()
    }
  }
}
</script>

性能优化

对于大数据量场景，可采用虚拟滚动技术：

<template>
  <RecycleScroller
    :items="sortedCities"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div>{{ item.name }}</div>
    </template>
  </RecycleScroller>
</template>

完整示例

结合拼音库实现更准确的中文排序：

import pinyin from 'pinyin'

methods: {
  sortCities() {
    this.cities.sort((a, b) => {
      const aPy = pinyin(a.name, { style: pinyin.STYLE_NORMAL }).join('')
      const bPy = pinyin(b.name, { style: pinyin.STYLE_NORMAL }).join('')
      return aPy.localeCompare(bPy)
    })
  }
}