uniapp实现table排序

根据后端接口传来的数字大小对列表进行升序/降序展示

效果图,价格由高到低降序

价格由低到高 升序

js 降序升序代码如下

复制代码
	export default {
		data() {
			return {
                    MtList:[]
                    }
                },
        onLoad() {
			        this.MtypeName();//加载列表方法
		        },
		methods: {
                MtypeName(){//列表方法
				this.$api.getTypeNameUserID({
					 ctime1:this.ctime3,
					 ctime2:this.ctime4,
				}).then(res => {//allmoney 金额
				     this.MtList = res.result.sort((a,b)=>b.allmoney-a.allmoney);//降序
                     //this.MtList = res.result.sort((a,b)=>a.allmoney-b.allmoney);//升序
				})
			},
                   }

wxml 代码

复制代码
<view class="typeClassDiv">
	<view class="typeListClass" v-for="(m,index) in MtList" @click="typeBut(m.typename,m.allmoney,m.bCount)">
	 <image :src="m.typeLogo" class="tyLogo"></image>
	 <view class="tyContent">
			 <view class="tytop"><text class='typeNameClass'>{{m.typename}}</text><text class='typeMClass'>{{m.bfb}}%({{m.bCount}}笔)</text></view>
				 <view class="tybottom">
					 <view class="progress-box">
			    <progress style="padding-top: 10px;padding-left: 2px;" :percent="m.bfb" stroke-width="3"/>
			 </view>
		 </view>
			 </view>
		 <view class="tyFont">
		 	¥{{m.allmoney}}
		  </view>
	  </view>
</view>

小程序日常记一记 分析页面 可参考

相关推荐
moxiaoran57531 小时前
uni-app学习笔记二十九--数据缓存
笔记·学习·uni-app
moxiaoran57536 小时前
uni-app学习笔记三十--request网络请求传参
笔记·学习·uni-app
疯狂的沙粒8 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
anyup11 小时前
快崩溃了!华为应用商店已经 4 次驳回我的应用上线
前端·华为·uni-app
alphaair19 小时前
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
uni-app·ai运动·ai运动识别·ai健身·ai体测·ai运动app·ai运动检测·工会云上运动会·ai人体检测·ai姿态识别
moxiaoran575320 小时前
uni-app学习笔记二十三--交互反馈showToast用法
笔记·学习·uni-app
Angindem1 天前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门1 天前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘2 天前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
疯狂的沙粒2 天前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app