实现一个表格万能排序功能，可升序，可降序

1、代码

// 排序
// data数组
// 字段名
// rev 升序trye 降序false
export function data排序(data, 字段名, rev = true) {

  return [...data].sort((a, b) => {

    var val1 = a[字段名];
    var val2 = b[字段名];

    if (typeof val1 === 'number' && typeof val2 === 'number') {
      return rev ? val1 - val2 : val2 - val1;
    } else if (typeof val1 === 'string' && typeof val2 === 'string') {
      if (!isNaN(val1) && !isNaN(val2)) {
        val1 = parseFloat(val1);
        val2 = parseFloat(val2);
        return rev ? val1 - val2 : val2 - val1;
      } else {
        return rev ? val1.localeCompare(val2) : val2.localeCompare(val1);
      }
    } else {
      // 其他数据类型，保持原顺序
      return 0;
    }
  });
}

2、使用

1、//导入
import {  data排序} from '../../xxx/xxx'

2、//数据 
排序: {      
   当前排序: 0,
   当前排序data: []
},
queryData: [],

3、//点击
getSort(e) {    
   console.log("排序", e)    
   let Sort = ""    
   let 字段 = e.target.dataset.data    
   let data = this.data.queryData    
    if (this.data.排序.当前排序 == 0) {      
       Sort = data排序(data, 字段)      
       this.setData({        
       queryData: Sort,        
       '排序.当前排序data': data,        
       '排序.当前排序': 1      })      
       console.log(this.data.queryData, "打印的数据")    
    } else if (this.data.排序.当前排序 == 1) { 
       Sort = data排序(data, 字段, false)      
       this.setData({        
         queryData: Sort,        
         '排序.当前排序': 0      
       })    
    }  
},

// html 
 <view class="observetable">           
    <view class="observetable-header">            
        <view class="observetable-cell monneycell">序号</view>            
           <view class="observetable-cell" onTap="getSort" data-data="1xxx">1xxx</view>
            <view class="observetable-cell" onTap="getSort" data-data="2xxx">2xxx</view>
             <view class="observetable-cell" onTap="getSort" data-data="3xxx">3xxx</view> 
           <view class="observetable-cell" onTap="getSort" data-data="4xxx">4xxx</view> 
            <view class="observetable-cell" onTap="getSort" data-data="5xxx">5xxx</view>
          </view>              
        <view a:for="{{ queryData }}" class="observetable-body"> 
         <view class="observetable-row">            
            <view class="observetable-cell monneycell">{{index + 1}}</view> 
            <view class="observetable-cell">{{item.1xxx}}</view> 
            <view class="observetable-cell">{{item.2xxx}}</view> 
               <view class="observetable-cell">{{item.3xxx}}</view> 
               <view class="observetable-cell">{{item.4xxx}}</view> 
             <view class="observetable-cell">{{item.5xxx}}</view> 
           </view> 
        </view>  
    </view>

//css.observetable { 
 margin-left: 10rpx;  
 margin-right: 10rpx;  
 background: #fff;  
 border-collapse: collapse;  
 font-size: 28rpx;  
 margin-top: 12rpx;}
 .observetable-header { 
 color: #0087FF;  
 background: #C1E0FC;  
 padding-top: 15rpx;  
 padding-bottom: 15rpx;  
 border-radius: 4rpx;  
 display: flex;  
 justify-content: space-between;
}
.observetable-header .observetable-cell{ 
 font-size: 24rpx; 
 text-align: center;  
padding: 12rpx 0rpx 12rpx 0rpx;  
border: 1rpx solid #C1E0FC;
}
.observetable-row .observetable-cell { 
 font-size: 22rpx;  
 text-align: center !important;  
 padding: 12rpx 0rpx 12rpx 0rpx;  
 border: 1rpx solid #fff;  
 align-items: center;
}
.monneycell {  
 width: 65rpx !important;
}
.observetable-header .observetable-cell:not(.monneycell) { 
 flex: 1;
}
.observetable-row .observetable-cell:not(.monneycell) { 
 flex: 1;
}
.observetable-row{ 
 border-bottom: solid 1rpx #d9d9d9; 
 padding-top: 12rpx !important; 
 padding-bottom: 12rpx !important;  
 display: flex;
}

3、理解

这段代码是一个 JavaScript 函数，用于将数据数组按照指定的属性进行排序。函数名为 data排序，其接受三个参数：

1. data：代表一个存储了多个 JavaScript 对象的数组，每个对象中包含有字段名为 字段名 的属性（即第二个参数所指定的属性名）。
2. 字段名：代表一个字符串，表示要基于哪个属性进行排序。
3. rev：一个布尔值，表示是否要进行倒序排序。默认为 true，即进行倒序排序。

函数体中使用了内置的 JavaScript sort() 方法来进行排序。传递给 sort() 方法的比较函数用于比较两个元素的大小，这里的比较函数返回一个数字来指示比较结果。

对于数值类型的属性，比较函数直接进行数值比较；对于字符串类型的属性，比较函数先判断字符串是否可以转换为数值，并在可以转换时进行数值比较，否则进行字符串比较；对于其他类型的属性，比较函数保持原顺序。

最后，通过解构赋值的方式返回排序后的数据数组。