手动 对列表字段进行排序

目录

 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
}