el-table表格数据按数字、字母及汉字,分页排序

最新推荐文章于 2023-11-15 17:40:31 发布

  

最新推荐文章于 2023-11-15 17:40:31 发布

阅读量1.7k

点赞数 1

文章标签： vue.js

原文链接：https://blog.csdn.net/qq_39186346/article/details/103861876

版权

本文介绍了一个JavaScript实现的自定义排序功能，用于HTML表格数据。通过监听`sort-change`事件，根据指定属性进行升序或降序排序。排序过程中，将数据转换为字符串，逐个字符比较，考虑了不同字符类型的比较规则，如数字、字母和中文，并且实现了对空值的特殊处理。此外，还涉及到了字符类型的判断和排序规则的定制。

摘要由CSDN通过智能技术生成

排序将数据转成字符串，逐个字符进行比较

html部分

<template>
  <el-table                
  :data="showTable"                             
  @sort-change='sort_change'>
    <el-table-column label="更新人员" prop="update_author" sortable='custom'>
  </el-table> 
  </template>

js部分

sort_change(column) {            
  this.currpage = 1;            
  this.proptype = column.prop;             
  if (column.order === "descending") {           
      this.order = 1            
      this.tableData.sort(this.sortDevName);            
   } else if (column.order === "ascending") {                   
      this.order = -1            
      this.tableData.sort(this.sortDevName);            
   }else{            
      this.tableData = JSON.parse(JSON.stringify(this.allTable))             
   }            
  tableSort(column,this.tableData,this.allTable)        
},        
sortDevName(str1, str2,a) {            
  let res = 0            
  str1[this.proptype] = String(str1[this.proptype])            
  str2[this.proptype] = String(str2[this.proptype])            
  if(str1[this.proptype] !== '' && str2[this.proptype] === ''){                
    return -1            
  }else if(str2[this.proptype] !== '' && str1[this.proptype] === ''){               
    return 1            
  }else{                
    for (let i = 0; ;i++) {                    
      if (!str1[this.proptype][i] || !str2[this.proptype][i]) {                        
         res = str1[this.proptype].length - str2[this.proptype].length                        
         break                    
      }                    
      const char1 = str1[this.proptype][i]                    
      const char1Type = this.getChartType(char1)                    
      const char2 = str2[this.proptype][i]                    
      const char2Type = this.getChartType(char2)                    
      // 类型相同的逐个比较字符                    
      if (char1Type[0] === char2Type[0]) {                        
         if (char1 === char2) {                        
            continue                        
         } else {                        
             if (char1Type[0] === 'zh') {                            
                 res = char1.localeCompare(char2)                        
             } else if (char1Type[0] === 'en') {                           
                res = char1.charCodeAt(0) - char2.charCodeAt(0)                        
             } else {                           
                res = char1 - char2                        
             }                        
             break                        
        }                    
     } else {                    
        // 类型不同的，直接用返回的数字相减                       
         res = char1Type[1] - char2Type[1]                       
         break                    
     }                
   }            
  }                       
  res = this.order * res            
  return res        
},        
getChartType(char) {        
  // 数字可按照排序的要求进行自定义，我这边产品的要求是        
  // 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）            
  if (/^[\u4e00-\u9fa5]$/.test(char)) {            
     return ['zh', 300]            
  }            
  if (/^[a-zA-Z]$/.test(char)) {            
     return ['en', 200]            
  }            
  if (/^[0-9]$/.test(char)) {            
     return ['number', 100]            
  }           
  return ['others', 999]       
}