长列表渲染数据的处理

以下面的图为一个demo

 

假设后台返回的数据类型是这样

let list = [{lable: '北京'， value: '', short: 'bj'}, {lable: '上海'， value: '', short: 'sh'}]

let cityObj = {}

list.forEach((item) => {

　　const short = item.short.slice(0, 1)

　　if (short in cityObj) {

　　　　cityObj[short].push(item)

　　} else {

　　　　cityObj[short] = [item]

　　}

　　

})

console.log(cityObj)

let cityArr = Object.keys(cityObj).sort()

我们就可以得到 { a: [...], b: [...] } 格式的对象 以及 [a,b,c...] 的数组

vue页面的渲染过程(下面渲染的对象或者数组根以上名称不一样，实际改下变量名就可以了)