vue对数据列表按照首字母A-Z进行排序_vue给数据按字母a-z排序-CSDN博客

本文链接：https://blog.csdn.net/qq_42580876/article/details/108793532

本文介绍如何在Vue项目中实现公司列表从A到Z的排序功能，通过使用computed属性和Array.prototype.sort方法来动态更新视图显示。当数据发生变化时，会自动按名称进行排序。

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

vue对数据按照A-Z进行排序

结构

<view class="company-item" v-for="item in reorder" :key="item.id" ">
	<text> {{item.name}} </text>
	<u-icon name="arrow-right" size="32"></u-icon>
</view>

<!-- 关键字未搜索到展商 -->
<view class="none" v-show="isShow">
	<img class="none-img" src="/static/search.png" />
	<text>未查询到相关的展商信息</text>
</view>

data数据

data() {
		return {
			keyword: '',
			companyList: [],
			isShow: false
		}
},

// 获取公司名称列表
			async getCompanyList() {
				const {
					code,
					data,
					msg
				} = await this.$u.get('/web/company-list', {
					lang: 'zh',
					keyword: this.keyword
				})
				if (!code) {
					this.companyList = data && Array.isArray(data) ? data : [],
					this.isShow = false
				}
				if (this.companyList == undefined || this.companyList.length <= 0) {
					this.isShow = true
				} else {
					this.isShow = false
				}
},

在computed方法里面对数据的处理

computed: {
	reorder() {
		return this.companyList.sort(function(x,y){
			return x["name"].localeCompare(y["name"]) 
			//index是companyList你需要索引的字段名称
		})
	}
},