中文转拼音资源地址：https://download.csdn.net/download/qq_38652871/10906193
排序方法记录地址：https://blog.csdn.net/qq_38652871/article/details/104068125
- 开发者工具预览，顺序是对的
- 真机运行也是好的
- 直接手机预览、体验预览，不按套路出牌了 捉鸡捉鸡捉鸡捉鸡捉鸡捉鸡捉鸡
排序方法：
export function compare(prop){
return function (obj1, obj2){
let a = obj1[prop];
let b = obj2[prop];
var n = !isNaN(a - 0), n2 = !isNaN(b - 0);
// 数字优先
if (n && n2) {
return a - b;
} else if (n) {
return -1;
} else if (n2) {
return 1;
}
// 将含有汉字的使用localeCompare排序
var e = escape(a).indexOf("%u") > -1, e2 = escape(b).indexOf("%u") > -1
if (e && e2) {
return a.localeCompare(b);
} else if (e) {
return 1;
} else if (e2) {
return -1;
}
return a.localeCompare(b);
}
}
自己测试：
一、我以为 for 循环的 key 冲突了，全部检查一遍，确保 key 不冲突
二、将 list 转换成 JSON 字符串直接写死，发现没问题，定位到了数据这块儿
三、在开发工具上输出排序之后的数据，发现没问题，真机运行调试输出排序之后的数据，也没问题
四、点击预览，打开小程序的调试模式，直接输出排序之后的数据列表，发现有问题，明明经过了排序，但是顺序还是跟初始数据顺序一致，真的是很不给力呐，这可怎么是好
第一次获取的数据（PC端和真机调试没问题，一在手机上预览就有问题）：
cityList:function(){
//获取所有省级城市
let tmpList = this.$store.getters.getCityList;
let tmpObj = {};
tmpList.sort(compare('name')); //排序
//console.log(tmpList); return ; //直接输出排序之后的数据
tmpList.map(el=>{
let tmpEl = {};
tmpEl.value = el.name;
tmpEl.type = 'firstUp';
let tmpTurnPY = this.$py(tmpEl); //汉字转拼音
let char = tmpTurnPY.substring(0,1); //取首字母
el.char = char;
el.pickers = this.$store.getters.getCdpfListByID(el.id) || [];
if(tmpObj.hasOwnProperty(char)){ //数据重组
tmpObj[char].push(el)
}else{
tmpObj[char] = [el];
}
})
this.list = JSON.parse(JSON.stringify(tmpObj));
},
第二次，暂时想到个解决办法，手动吧:
但是这样有个问题，就是同样一个字母下方的汉字没按照拼音排序，但是暂时只能这么扔这儿了
cityList:function(){
//获取所有省级城市
let tmpList = this.$store.getters.getCityList;
let tmpObj = {};
tmpList.sort(compare('name')); //排序
tmpList.map(el=>{
let tmpEl = {};
tmpEl.value = el.name;
tmpEl.type = 'firstUp';
let tmpTurnPY = this.$py(tmpEl);//汉字转拼音
let char = tmpTurnPY.substring(0,1);
el.char = char;
el.pickers = this.$store.getters.getCdpfListByID(el.id) || [];
if(tmpObj.hasOwnProperty(char)){//数据重组
tmpObj[char].push(el)
}else{
tmpObj[char] = [el];
}
})
let tmpRealObj = {};
for(let v of this.abcList){ //abcList:['A','B','C','D'...]
if(tmpObj[v]){
tmpRealObj[v] = tmpObj[v];
}
}
console.log('JSON.stringify(tmpRealObj)',JSON.stringify(tmpRealObj))
this.list = JSON.parse(JSON.stringify(tmpRealObj));
},
第二天：
果然，早上思想比较活跃，发现自己咋那么笨嘞，汉字都转成拼音了，干嘛还用 localeCompare 排序啊，看来昨天没吃药…，来 改良一下子
cityList: function() {
//获取所有省级城市
let tmpList = this.$store.getters.getCityList;
/* 获取完数据不在这儿排序了 */
let tmpObj = {};
tmpList.map(el => {
let tmpEl = {};
tmpEl.value = el.name;
tmpEl.type = 'firstUp';
let tmpTurnPY = this.$py(tmpEl); //转拼音
el.py = tmpTurnPY; //将拼音存储起来
let char = tmpTurnPY.substring(0, 1);
el.char = char;
el.pickers = this.$store.getters.getCdpfListByID(el.id) || [];
})
tmpList.sort(compare('py')); //在这儿，按照拼音排序
console.log('tmpList',tmpList); //这样就OK拉，也不用考虑 localeCompare 兼容问题拉
tmpList.forEach(el => {
if (tmpObj.hasOwnProperty(el.char)) {//数据重组
tmpObj[el.char].push(el)
} else {
tmpObj[el.char] = [el];
}
})
this.list = JSON.parse(JSON.stringify(tmpObj));
},
哇嘎嘎，搞定~手机端预览和PC端还有真机调试都一模一样
中文转拼音资源地址：https://download.csdn.net/download/qq_38652871/10906193
排序方法记录地址：https://blog.csdn.net/qq_38652871/article/details/104068125
自己造的假数据：
list = [
{
id:1,
name:'北京残联',
son:list = [
{
id:11,
name:'北京残联1'
},{
id:21,
name:'河北残联1'
},{
id:31,
name:'鞍山残联1'
},{
id:41,
name:'云南残联1'
},{
id:51,
name:'四川残联1'
},{
id:61,
name:'辽宁残联1'
},{
id:71,
name:'安徽残联1'
},{
id:81,
name:'江苏残联1'
},{
id:91,
name:'吉林残联1'
},{
id:101,
name:'河南残联1'
}
]
},{
id:2,
name:'卑鄙残联',
son:list = [
{
id:12,
name:'北京残联2'
},{
id:22,
name:'河北残联2'
},{
id:32,
name:'鞍山残联2'
},{
id:42,
name:'云南残联2'
},{
id:52,
name:'四川残联2'
},{
id:62,
name:'辽宁残联2'
},{
id:72,
name:'安徽残联2'
},{
id:82,
name:'江苏残联2'
},{
id:92,
name:'吉林残联2'
},{
id:102,
name:'河南残联2'
}
]
},{
id:3,
name:'鞍山残联',
son:list = [
{
id:13,
name:'北京残联3'
},{
id:23,
name:'河北残联3'
},{
id:33,
name:'鞍山残联3'
},{
id:43,
name:'云南残联3'
},{
id:53,
name:'四川残联3'
},{
id:63,
name:'辽宁残联3'
},{
id:73,
name:'安徽残联3'
},{
id:83,
name:'江苏残联3'
},{
id:93,
name:'吉林残联3'
},{
id:103,
name:'河南残联3'
}
]
},{
id:4,
name:'哔哔哔残联',
son:list = [
{
id:14,
name:'北京残联4'
},{
id:24,
name:'河北残联4'
},{
id:34,
name:'鞍山残联4'
},{
id:44,
name:'云南残联4'
},{
id:54,
name:'四川残联4'
},{
id:64,
name:'辽宁残联4'
},{
id:74,
name:'安徽残联4'
},{
id:84,
name:'江苏残联4'
},{
id:94,
name:'吉林残联4'
},{
id:104,
name:'河南残联4'
}
]
},{
id:5,
name:'比例比例残联',
son:list = [
{
id:15,
name:'北京残联5'
},{
id:25,
name:'河北残联5'
},{
id:35,
name:'鞍山残联5'
},{
id:45,
name:'云南残联5'
},{
id:55,
name:'四川残联5'
},{
id:65,
name:'辽宁残联5'
},{
id:75,
name:'安徽残联5'
},{
id:85,
name:'江苏残联5'
},{
id:95,
name:'吉林残联5'
},{
id:105,
name:'河南残联5'
}
]
},{
id:6,
name:'辽宁残联1',
son:list = [
{
id:16,
name:'北京残联6'
},{
id:26,
name:'河北残联6'
},{
id:36,
name:'鞍山残联6'
},{
id:46,
name:'云南残联6'
},{
id:56,
name:'四川残联6'
},{
id:66,
name:'辽宁残联6'
},{
id:76,
name:'安徽残联6'
},{
id:86,
name:'江苏残联6'
},{
id:96,
name:'吉林残联6'
},{
id:106,
name:'河南残联6'
}
]
},{
id:7,
name:'安徽残联',
son:list = [
{
id:17,
name:'北京残联7'
},{
id:27,
name:'河北残联7'
},{
id:37,
name:'鞍山残联7'
},{
id:47,
name:'云南残联7'
},{
id:57,
name:'四川残联7'
},{
id:67,
name:'辽宁残联7'
},{
id:77,
name:'安徽残联7'
},{
id:87,
name:'江苏残联7'
},{
id:97,
name:'吉林残联7'
},{
id:107,
name:'河南残联7'
}
]
},{
id:8,
name:'江苏残联',
son:list = [
{
id:18,
name:'北京残联8'
},{
id:28,
name:'河北残联8'
},{
id:38,
name:'鞍山残联8'
},{
id:48,
name:'云南残联8'
},{
id:58,
name:'四川残联8'
},{
id:68,
name:'辽宁残联8'
},{
id:78,
name:'安徽残联8'
},{
id:88,
name:'江苏残联8'
},{
id:98,
name:'吉林残联8'
},{
id:108,
name:'河南残联8'
}
]
},{
id:9,
name:'吉林残联',
son:list = [
{
id:19,
name:'北京残联9'
},{
id:29,
name:'河北残联9'
},{
id:39,
name:'鞍山残联9'
},{
id:49,
name:'云南残联9'
},{
id:59,
name:'四川残联9'
},{
id:69,
name:'辽宁残联9'
},{
id:79,
name:'安徽残联9'
},{
id:89,
name:'江苏残联9'
},{
id:99,
name:'吉林残联9'
},{
id:109,
name:'河南残联9'
}
]
},{
id:10,
name:'安阳残联',
son:list = [
{
id:110,
name:'北京残联0'
},{
id:210,
name:'河北残联0'
},{
id:310,
name:'鞍山残联0'
},{
id:410,
name:'云南残联0'
},{
id:510,
name:'四川残联10'
},{
id:610,
name:'辽宁残联10'
},{
id:710,
name:'安徽残联10'
},{
id:810,
name:'江苏残联10'
},{
id:910,
name:'吉林残联10'
},{
id:11010,
name:'河南残联10'
}
]
},{
id:11,
name:'安北残联',
son:list = [
{
id:111,
name:'北京残联11'
},{
id:211,
name:'河北残联11'
},{
id:311,
name:'鞍山残联11'
},{
id:411,
name:'云南残联11'
},{
id:511,
name:'四川残联11'
},{
id:611,
name:'辽宁残联11'
},{
id:711,
name:'安徽残联11'
},{
id:811,
name:'江苏残联11'
},{
id:911,
name:'吉林残联11'
},{
id:11111,
name:'河南残联11'
}
]
},{
id:12,
name:'阿诺残联',
son:list = [
{
id:112,
name:'北京残联12'
},{
id:212,
name:'河北残联12'
},{
id:312,
name:'鞍山残联12'
},{
id:412,
name:'云南残联12'
},{
id:512,
name:'四川残联12'
},{
id:612,
name:'辽宁残联12'
},{
id:712,
name:'安徽残联12'
},{
id:812,
name:'江苏残联12'
},{
id:912,
name:'吉林残联12'
},{
id:11212,
name:'河南残联12'
}
]
},{
id:13,
name:'昂贵残联',
son:list = [
{
id:113,
name:'北京残联13'
},{
id:213,
name:'河北残联13'
},{
id:313,
name:'鞍山残联13'
},{
id:413,
name:'云南残联13'
},{
id:513,
name:'四川残联13'
},{
id:613,
name:'辽宁残联13'
},{
id:713,
name:'安徽残联13'
},{
id:813,
name:'江苏残联13'
},{
id:913,
name:'吉林残联13'
},{
id:11313,
name:'河南残联13'
}
]
},{
id:14,
name:'阿托卡残联',
son:list = [
{
id:114,
name:'北京残联14'
},{
id:214,
name:'河北残联14'
},{
id:314,
name:'鞍山残联14'
},{
id:414,
name:'云南残联14'
},{
id:514,
name:'四川残联14'
},{
id:614,
name:'辽宁残联14'
},{
id:714,
name:'安徽残联14'
},{
id:814,
name:'江苏残联14'
},{
id:914,
name:'吉林残联14'
},{
id:11414,
name:'河南残联14'
}
]
},{
id:15,
name:'阿里嘎残联',
son:list = [
{
id:115,
name:'北京残联15'
},{
id:215,
name:'河北残联15'
},{
id:315,
name:'鞍山残联15'
},{
id:415,
name:'云南残联15'
},{
id:515,
name:'四川残联15'
},{
id:615,
name:'辽宁残联15'
},{
id:715,
name:'安徽残联15'
},{
id:815,
name:'江苏残联15'
},{
id:915,
name:'吉林残联15'
},{
id:11515,
name:'河南残联15'
}
]
},{
id:16,
name:'吉林残联',
son:list = [
{
id:116,
name:'北京残联16'
},{
id:216,
name:'河北残联16'
},{
id:316,
name:'鞍山残联16'
},{
id:416,
name:'云南残联16'
},{
id:516,
name:'四川残联16'
},{
id:616,
name:'辽宁残联16'
},{
id:716,
name:'安徽残联16'
},{
id:816,
name:'江苏残联16'
},{
id:1616,
name:'吉林残联16'
},{
id:11516,
name:'河南残联16'
}
]
},{
id:17,
name:'吉林残联',
son:list = [
{
id:117,
name:'北京残联17'
},{
id:217,
name:'河北残联17'
},{
id:317,
name:'鞍山残联17'
},{
id:417,
name:'云南残联17'
},{
id:517,
name:'四川残联17'
},{
id:617,
name:'辽宁残联17'
},{
id:717,
name:'安徽残联17'
},{
id:817,
name:'江苏残联17'
},{
id:1717,
name:'吉林残联17'
},{
id:11517,
name:'河南残联17'
}
]
},{
id:18,
name:'吉林残联',
son:list = [
{
id:118,
name:'北京残联18'
},{
id:218,
name:'河北残联18'
},{
id:318,
name:'鞍山残联18'
},{
id:418,
name:'云南残联18'
},{
id:518,
name:'四川残联18'
},{
id:618,
name:'辽宁残联18'
},{
id:718,
name:'安徽残联18'
},{
id:818,
name:'江苏残联18'
},{
id:1818,
name:'吉林残联18'
},{
id:11518,
name:'河南残联18'
}
]
},{
id:19,
name:'吉林残联',
son:list = [
{
id:119,
name:'北京残联19'
},{
id:219,
name:'河北残联19'
},{
id:319,
name:'鞍山残联19'
},{
id:419,
name:'云南残联19'
},{
id:519,
name:'四川残联19'
},{
id:619,
name:'辽宁残联19'
},{
id:719,
name:'安徽残联19'
},{
id:819,
name:'江苏残联19'
},{
id:1919,
name:'吉林残联19'
},{
id:11519,
name:'河南残联19'
}
]
},{
id:20,
name:'吉林残联',
son:list = [
{
id:120,
name:'北京残联20'
},{
id:220,
name:'河北残联20'
},{
id:320,
name:'鞍山残联20'
},{
id:420,
name:'云南残联20'
},{
id:520,
name:'四川残联20'
},{
id:620,
name:'辽宁残联20'
},{
id:720,
name:'安徽残联20'
},{
id:820,
name:'江苏残联20'
},{
id:2020,
name:'吉林残联20'
},{
id:1020,
name:'河南残联20'
}
]
},{
id:21,
name:'辽宁残联2',
son:list = [
{
id:121,
name:'北京残联21'
},{
id:221,
name:'河北残联21'
},{
id:321,
name:'鞍山残联21'
},{
id:421,
name:'云南残联21'
},{
id:521,
name:'四川残联21'
},{
id:2121,
name:'辽宁残联21'
},{
id:721,
name:'安徽残联21'
},{
id:821,
name:'江苏残联21'
},{
id:2021,
name:'吉林残联21'
},{
id:1021,
name:'河南残联21'
}
]
},{
id:22,
name:'辽宁残联3',
son:list = [
{
id:122,
name:'北京残联22'
},{
id:222,
name:'河北残联22'
},{
id:322,
name:'鞍山残联22'
},{
id:422,
name:'云南残联22'
},{
id:522,
name:'四川残联22'
},{
id:2222,
name:'辽宁残联22'
},{
id:722,
name:'安徽残联22'
},{
id:822,
name:'江苏残联22'
},{
id:922,
name:'吉林残联22'
},{
id:1022,
name:'河南残联22'
}
]
},{
id:23,
name:'辽宁残联4',
son:list = [
{
id:123,
name:'北京残联23'
},{
id:223,
name:'河北残联23'
},{
id:323,
name:'鞍山残联23'
},{
id:423,
name:'云南残联23'
},{
id:523,
name:'四川残联23'
},{
id:2323,
name:'辽宁残联23'
},{
id:723,
name:'安徽残联23'
},{
id:823,
name:'江苏残联23'
},{
id:923,
name:'吉林残联23'
},{
id:1023,
name:'河南残联23'
}
]
},{
id:24,
name:'辽宁残联5',
son:list = [
{
id:124,
name:'北京残联24'
},{
id:224,
name:'河北残联24'
},{
id:324,
name:'鞍山残联24'
},{
id:424,
name:'云南残联24'
},{
id:524,
name:'四川残联24'
},{
id:2424,
name:'辽宁残联24'
},{
id:724,
name:'安徽残联24'
},{
id:824,
name:'江苏残联24'
},{
id:924,
name:'吉林残联24'
},{
id:1024,
name:'河南残联24'
}
]
},{
id:25,
name:'辽宁残联6',
son:list = [
{
id:125,
name:'北京残联25'
},{
id:225,
name:'河北残联25'
},{
id:325,
name:'鞍山残联25'
},{
id:425,
name:'云南残联25'
},{
id:525,
name:'四川残联25'
},{
id:2525,
name:'辽宁残联25'
},{
id:725,
name:'安徽残联25'
},{
id:825,
name:'江苏残联25'
},{
id:925,
name:'吉林残联25'
},{
id:1025,
name:'河南残联25'
}
]
},{
id:26,
name:'辽宁残联7',
son:list = [
{
id:126,
name:'北京残联26'
},{
id:226,
name:'河北残联26'
},{
id:326,
name:'鞍山残联26'
},{
id:426,
name:'云南残联26'
},{
id:526,
name:'四川残联26'
},{
id:2626,
name:'辽宁残联26'
},{
id:726,
name:'安徽残联26'
},{
id:826,
name:'江苏残联26'
},{
id:926,
name:'吉林残联26'
},{
id:1026,
name:'河南残联26'
}
]
},{
id:27,
name:'辽宁残联8',
son:list = [
{
id:127,
name:'北京残联27'
},{
id:227,
name:'河北残联27'
},{
id:327,
name:'鞍山残联27'
},{
id:427,
name:'云南残联27'
},{
id:527,
name:'四川残联27'
},{
id:2727,
name:'辽宁残联27'
},{
id:727,
name:'安徽残联27'
},{
id:827,
name:'江苏残联27'
},{
id:927,
name:'吉林残联27'
},{
id:1027,
name:'河南残联27'
}
]
}
]
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
