Technology Sharing

uniapp implements table sorting

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Display the list in ascending/descending order according to the size of the numbers sent by the backend interface

Effect picture, price from high to low descending

Price from low to high ascending

The js descending and ascending codes are as follows

  1. export default {
  2. data() {
  3. return {
  4. MtList:[]
  5. }
  6. },
  7. onLoad() {
  8. this.MtypeName();//加载列表方法
  9. },
  10. methods: {
  11. MtypeName(){//列表方法
  12. this.$api.getTypeNameUserID({
  13. ctime1:this.ctime3,
  14. ctime2:this.ctime4,
  15. }).then(res => {//allmoney 金额
  16. this.MtList = res.result.sort((a,b)=>b.allmoney-a.allmoney);//降序
  17. //this.MtList = res.result.sort((a,b)=>a.allmoney-b.allmoney);//升序
  18. })
  19. },
  20. }

wxml code

  1. <view class="typeClassDiv">
  2. <view class="typeListClass" v-for="(m,index) in MtList" @click="typeBut(m.typename,m.allmoney,m.bCount)">
  3. <image :src="m.typeLogo" class="tyLogo"></image>
  4. <view class="tyContent">
  5. <view class="tytop"><text class='typeNameClass'>{{m.typename}}</text><text class='typeMClass'>{{m.bfb}}%({{m.bCount}}笔)</text></view>
  6. <view class="tybottom">
  7. <view class="progress-box">
  8. <progress style="padding-top: 10px;padding-left: 2px;" :percent="m.bfb" stroke-width="3"/>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="tyFont">
  13. ¥{{m.allmoney}}
  14. </view>
  15. </view>
  16. </view>

Mini Program Daily Notes Analysis Page can be referenced