手动 对列表字段进行排序

目录

 1. 严格按照排序：数字<字母<中文<特殊<空值 

2.  按字符编码顺序：0（U+0030）< 《（U+300A）< A（U+0041）< 成（U+6210）。

---

//数据
const tableData = [
  { id: 1, itemName: 'AA成品111', itemSpec: 'AA成品111' },
  { id: 2, itemName: '行李螺丝', itemSpec: '--' },
  { id: 3, itemName: '10', itemSpec: 'null' },
  { id: 4, itemName: '啊-01', itemSpec: '螺丝' },
  { id: 5, itemName: '--', itemSpec: 'AA009*002' },
  { id: 6, itemName: '1', itemSpec: '' },
  { id: 7, itemName: null, itemSpec: '' },
  { id: 8, itemName: '《配件》3612', itemSpec: '【ww胜11多我问问负少】' },
  { id: 9, itemName: '0217-23', itemSpec: '螺丝' }
];

 1. 严格按照排序：数字<字母<中文<特殊<空值 

/*支持正序/倒序的排序函数
* field---字段，例如'itemName'
* order-- 正序/倒序
*/
sortTableData(field, order) {
const tempData=[...this.list]
  tempData.sort((a, b) => {
    const valA = a[field] ?? ''; //处理
    const valB = b[field] ?? '';
    
    // 处理空字符串（排在末尾）
    if (valA === '' && valB === '') return 0;
    if (valA === '') return order === 'asc' ? 1 : -1;
    if (valB === '') return order === 'asc' ? -1 : 1;
    
    // 数字识别（正则匹配纯数字）
    const isNumA = /^\d+$/.test(valA);
    const isNumB = /^\d+$/.test(valB);

    // 数字识别（只要数字开头 就 视为数字）
    //const isNumA = /^\d/.test(valA);
    //const isNumB = /^\d/.test(valB);
    
    if (isNumA && isNumB) {
      return order === 'asc' 
        ? parseInt(valA) - parseInt(valB) 
        : parseInt(valB) - parseInt(valA);
    }
    
    if (isNumA) return order === 'asc' ? -1 : 1;
    if (isNumB) return order === 'asc' ? 1 : -1;
    
    // 字母识别（正则匹配字母开头）
    const isLetterA = /^[A-Za-z]/.test(valA);
    const isLetterB = /^[A-Za-z]/.test(valB);
    
    if (isLetterA && isLetterB) {
      return order === 'asc' 
        ? valA.localeCompare(valB) 
        : valB.localeCompare(valA);
    }
    
    if (isLetterA) return order === 'asc' ? -1 : 1;
    if (isLetterB) return order === 'asc' ? 1 : -1;
    
    // 区分特殊字符和中文
    const isSpecialA = /^[^a-zA-Z0-9\u4e00-\u9fa5]/.test(valA);
    const isSpecialB = /^[^a-zA-Z0-9\u4e00-\u9fa5]/.test(valB);
    
    if (isSpecialA && !isSpecialB) return order === 'asc' ? 1 : -1;
    if (!isSpecialA && isSpecialB) return order === 'asc' ? -1 : 1;

    // 中文按拼音，特殊字符最后
    return order === 'asc' 
      ? valA.localeCompare(valB, 'zh-CN') 
      : valB.localeCompare(valA, 'zh-CN');
  });
  this.list=tempData
return  tempData
}

打印结果为：1 → 10 → 0217-23 → AA成品111 → 啊-01 → 行李螺丝 → 《配件》3612 → -- → null

2.  按字符编码顺序：0（U+0030）< 《（U+300A）< A（U+0041）< 成（U+6210）。

/*
* 排序
* field ---字段
* order ---正序/倒序
*/
sortByField(field, order) {
  const tempData = [...this.tableData];
  
  tempData.sort((a, b) => {
    const valA = a[field];
    const valB = b[field];
    
    // 处理空值或无效值（统一放末尾）
    if (valA === null || valA === undefined || valA === '' || valA === '--') {
      return 1;
    }
    if (valB === null || valB === undefined || valB === '' || valA === '--') {
      return -1;
    }
    
    // 判断类型
    const isNumA = !isNaN(parseFloat(valA)) && isFinite(valA);
    const isNumB = !isNaN(parseFloat(valB)) && isFinite(valB);
    
    // 数字比较
    if (isNumA && isNumB) {
      return order === 'asc' ? parseFloat(valA) - parseFloat(valB) : parseFloat(valB) - parseFloat(valA);
    }
    
    // 数字优先于非数字
    if (isNumA && !isNumB) {
      return order === 'asc' ? -1 : 1;
    }
    if (!isNumA && isNumB) {
      return order === 'asc' ? 1 : -1;
    }
    
    // 非数字按 Unicode 排序（字母和中文）
    return order === 'asc' 
      ? valA.toString().localeCompare(valB.toString()) 
      : valB.toString().localeCompare(valA.toString());
  });
  
  this.tableData = tempData;
  return  tempData
}