uniapp实现table排序

news2024/9/27 12:12:50

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

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

价格由低到高 升序

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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1920103.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

产品经理-一份标准需求文档的8个模块(14)

一份标准优秀的产品需求文档包括&#xff1a; ❑ 封面&#xff1b; ❑ 文档修订记录表&#xff1b; ❑ 目录&#xff1b; ❑ 引言&#xff1b; ❑ 产品概述&#xff1a;产品结构图 ❑ 详细需求说明&#xff1a;产品逻辑图、功能与特性简述列表、交互/视觉设计、需求详细描述&am…

地理信息科学在交通规划中的应用:GIS绘制智慧出行新蓝图

在当代城市化迅猛发展的背景下&#xff0c;交通规划面临着前所未有的挑战与机遇。作为地理信息与遥感领域的研究者&#xff0c;我深感地理信息科学&#xff08;GIS&#xff09;在解决这些问题时扮演着无可替代的角色。本文将深入探讨GIS如何在交通网络分析和优化中发挥核心作用…

netscaler LDAP+RADIUS传统的双因素认证方式(之一)

如果使用传统的双因素认证方式&#xff0c;可以通过在Citrix ADC (NetScaler) 13.1上配置Gateway Virtual Server来实现LDAP和RADIUS的双因素认证。当前配置方式&#xff0c;采用Cateway vServer两个Basic Authtication Policy方式实现&#xff0c;以下是详细步骤&#xff1a; …

蜂窝互联网接入:连接世界的无缝体验

通过Wi—Fi&#xff0c;人们可以方便地接入互联网&#xff0c;但无线局域网的覆盖范围通常只有10&#xff5e;100m。当我们携带笔记本电脑在外面四处移动时&#xff0c;并不是在所有地方都能找到可接入互联网的Wi—Fi热点&#xff0c;这时候蜂窝移动通信系统可以为我们提供广域…

【趣味数学】求阴影部分面积

题 解法1: 中位线法 既然是中点&#xff0c;就可以用起来&#xff0c;横着不行&#xff0c;竖着来&#xff0c;扩展做辅助线 E是中点S&#xff08;AED) 1/4 S(ABCD) 6 做图中辅助延长线&#xff0c;因为E中点&#xff0c;所以S&#xff08;MEB&#xff09;S(AED) 6 同理E也是…

element el-table实现表格动态增加/删除/编辑表格行,带校验规则

本篇文章记录el-table增加一行可编辑的数据列&#xff0c;进行增删改。 1.增加空白行 直接在页面mounted时对form里面的table列表增加一行数据&#xff0c;直接使用push() 方法增加一列数据这个时候也可以设置一些默认值。比如案例里面的 产品件数 。 mounted() {this.$nextTi…

学习通er图和项目思路

ER图 项目构思&#xff1a; 用户功能&#xff1a; 主要功能逻辑&#xff1a;

计算机是如何工作的 (程序猿基础知识)

文章目录 1.计算机的发展史2. 冯诺依曼体系 (Von Neumann Architecture)冯诺依曼简介 (计算机的祖师爷) 3. CPU基本工作流程3.1 逻辑门3.2 门电路(Gate Circuit)3.3 算数逻辑单元 ALU (Arithmetic & Logic Unit)3.3.1 进制的理解3.3.2 算数单元(Arithmetic Unit)3.3.3 逻辑…

【错题集-编程题】买卖股票的最好时机(四)(动态规划)

力扣对应题目链接&#xff1a;188. 买卖股票的最佳时机 IV - 力扣&#xff08;LeetCode&#xff09; 牛客对应题目链接&#xff1a;买卖股票的最好时机(四)_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 1、状态表示 为了更加清晰的区分买入和卖出&#xff0c;我们换成有股…

【从零开始实现stm32无刷电机FOC】【实践】【4/6 stm32高级定时器】

点击查看本文开源的完整FOC工程 在完成理论方面的准备后&#xff0c;是可以进行写代码实现了&#xff0c;但是stm32单片机提供了不少可以用于电机控制的硬件外设&#xff0c;充分利用这些硬件资源&#xff0c;可以减少代码量以及提高运行性能。 本文使用的stm32型号为喜闻乐见的…

天环公益首发原创开发进度网站 带后台

天环公益计划首发原创开发进度网站 带后台 后台地址是&#xff1a;admin.php 后台没有账号密码 这个没有数据库 有能力的可以自己改 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89520358 更多资源下载&#xff1a;关注我。

位图 、Max Sum、滑动窗口

这篇博客主要总结一下&#xff0c;这两天刷的算法题&#xff1a; 判断字符是否唯一 题目意思很简单不再解读&#xff0c;拿到这道题&#xff0c;其实不难看出哈希表可以直接秒了&#xff0c;注意这是一道面试题&#xff0c;在oj上可以哈希表秒了&#xff0c;如果面试官要求不使…

如何连接到公司的服务器?

1.下载FileZilla FileZilla的下载与安装以及简单使用&#xff08;有图解超简单&#xff09;-CSDN博客 2.打开 3.输入主机 用户名 密码 端口 注&#xff1a;主机支持的协议类型&#xff1a; 4.连接成功 其他方式也有很多&#xff0c;比如通过cmd&#xff0c;html网页等等 3个…

Apache Doris + Apache Hudi 快速搭建指南|Lakehouse 使用手册(一)

作者&#xff1a;SelectDB 技术团队 导读&#xff1a;湖仓一体&#xff08;Data Lakehouse&#xff09;融合了数据仓库的高性能、实时性以及数据湖的低成本、灵活性等优势&#xff0c;帮助用户更加便捷地满足各种数据处理分析的需求。在过去多个版本中&#xff0c;Apache Doris…

下载动画人物

1、网址&#xff1a;动画 2、点击Characters 3、搜索人物 4、点击弹出的人物&#xff0c;弹出对话框选择USE THIS CHARACTER 5、下载 6、点击Animations&#xff0c;搜索walk 7、点击UPLOAD CHARACTER&#xff0c;看到男孩步行&#xff0c;选择In Place&#xff0c;点击下载&…

浅谈后置处理器组件提取器相关的Apply to

浅谈后置处理器组件提取器相关的Apply to 在Apache JMeter中&#xff0c;“提取器”&#xff08;通常指的是正则表达式提取器、JSON路径提取器或CSS/JQuery提取器等&#xff09;是用来从服务器响应中提取信息的重要组件。这些信息可以是cookies、session IDs、特定的文本或者任…

作业一:ER图 作业:二QQ项目思路 作业三:实现QQ的登录与注册界面

一、ER图 二、QQ项目思路&#xff1a;客户端功能&#xff0c;服务器端功能的实现 1.登录注册&#xff1a; 将基本信息如手机号码&#xff0c;验证码&#xff0c;还有已有的账号及账号相关信息等存入数据库中&#xff0c;登录方式为账号密码登录&#xff0c;还有忘记密码用邮箱…

023-GeoGebra中级篇-几何对象之圆锥曲线

圆锥曲线是解析几何中的重要部分&#xff0c;它们包括椭圆、双曲线、抛物线和圆。通过使用预先定义的变量&#xff08;如数值、点和向量&#xff09;&#xff0c;我们可以动态地构建这些曲线的方程&#xff0c;并观察它们如何随变量的变化而变化。本文将介绍如何通过定义变量来…

TikTok 入局小游戏,小游戏出海赛道大热,开发者如何抢滩海外市场?

国内小游戏市场的竞争日益激烈&#xff0c;开发成本上涨、买量的投入成本飙升&#xff0c;对小团队和个人开发者的资金要求量高。除此以外&#xff0c;单款游戏从软著、备案、到认证所需要的时间和费用都大幅提升&#xff0c;也对小游戏市场造成重大影响。重压之下&#xff0c;…

旅游景区度假村展示型网站如何建设渠道品牌

景区、度假村、境外旅游几乎每天的人流量都非常高&#xff0c;还包括本地附近游等&#xff0c;对景区及度假村等固定高流量场所&#xff0c;品牌和客户赋能都是需要完善的&#xff0c;尤其是信息展示方面&#xff0c;旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…