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>

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

原文地址：https://blog.csdn.net/qq_39772439/article/details/140351693

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！