vue实现按字母A-Z选择城市

<template>
<div class="assetAllocation">
<Header class="header" @PagebackFun="BackFun" :IsBack="IsBack" :HeaderText="HeaderText"></Header>
<div class="contentBox">
<div v-for="(cityObj,index) in compopanyJSON" :id="index+'Content'">
<p class="letterColor" v-show="cityObj.length > 0">{{index}}</p>
<ul>
<li v-for="item in cityObj" class="assetsCity" @tap="selectCom(item.compopany)" :id="item.compopany+'City'">{{item.compopany}}</li>
</ul>
</div>
<div class="letters">
<ul>
<li class="letter" v-for="(key,indexL) in letters" @tap="selectCompony(key,indexL)">{{key}}</li>
</ul>
</div>
<div class="middle"></div>
</div>
</div>
</template>

<script>
import Header from '../../components/Header/Header';
import pinyin from '../../../node_modules/js-pinyin/index'
export default {
name: 'selectCompany',
data() {
return {
IsBack: true,
HeaderText: '资产分布',
listObj: [{
"compopany": "安康",
"id": "001"
}, {
"compopany": "重庆",
"id": "002"
}, {
"compopany": "北京",
"id": "003"
},
{
"compopany": "大明湖",
"id": "004"
}, {
"compopany": "二龙",
"id": "005"
}, {
"compopany": "福州",
"id": "006"
},
{
"compopany": "广州",
"id": "001"
}, {
"compopany": "广东",
"id": "001"
}, {
"compopany": "哈尔滨",
"id": "001"
},
{
"compopany": "济南",
"id": "001"
}, {
"compopany": "昆明",
"id": "001"
}, {
"compopany": "拉萨",
"id": "001"
}
],
letters: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
selectedCity: "",
compopanyJSON: {},
}
},
components: {
Header
},
mounted() {
let that = this;
let pinyin = require('js-pinyin');
pinyin.setOptions({
checkPolyphone: false,
charCase: 0
});
//getFullCharsn 获取字符串全部拼音，并且首字母大写；getCamelChars() ： 获取字符串拼音首字母，并大写；传入的参数不是汉字时，不会进行转换，仍然输出源字符串。
let cityArr = [];
for(let i = 0; i < that.listObj.length; i++) {
//遍历数组,拿到城市名称
let compopanyName = that.listObj[i].compopany;
//取全部城市的首字母
if(compopanyName.indexOf("重")!=-1&&compopanyName.indexOf("重") == 0){
pinyin.getCamelChars(compopanyName).substring(0, 1) == "C"; //这里截取首字母的第一位
var fristName = "C";
}else{
var fristName = pinyin.getCamelChars(compopanyName).substring(0, 1); //这里截取首字母的第一位
}
//给原json添加首字母键值对
that.listObj[i].first = fristName;
//放入新数组
cityArr.push(that.listObj[i]);
}
let cityJson = {};
//根据首字母键值对给原数据按首字母分类
for(let j = 0; j < that.letters.length; j++) { //这里的FirstPin是一个写入了所有字母的数组,见data中
cityJson[that.letters[j]] = cityArr.filter(function(value) {
return value.first === that.letters[j];
})
}
that.compopanyJSON = cityJson;
},
methods: {
BackFun() {
var that = this;
that.$router.go(-1);
},
selectCompony(key, indexL) {
let that = this;
let li = document.getElementsByClassName("letter");
let el = document.getElementById(key + "Content");
if(el) {
let middleContent = document.getElementsByClassName("middle")[0];
for(let index in that.compopanyJSON) {
if(index == key && that.compopanyJSON[key].length > 0) {
for(let i = 0; i < li.length; i++) {
if(indexL == i) {
li[i].classList.add("letterBg");
} else {
li[i].classList.remove("letterBg");
}
}
middleContent.innerHTML = key;
setTimeout(() => {
middleContent.innerHTML = "";
}, 500)
}
}
let FTop = el.offsetTop;
document.getElementsByClassName("contentBox")[0].scrollTop = FTop - 86;
}
},
selectCom(item) {
let that = this;
that.selectedCity = item;
let allLi = document.getElementsByClassName("assetsCity");
let currentLi = document.getElementById(item + "City");
let currentId = currentLi.getAttribute("id");
for(let i = 0; i < allLi.length; i++) {
let otherId = allLi[i].getAttribute("id");
if(otherId == currentId) {
allLi[i].classList.add("active")
} else {
allLi[i].classList.remove("active");
}
}
setTimeout(() => {
that.$router.push({
path: "/AccountView",
query: {
selectedCity: that.selectedCity
}
});
}, 300)
},
},
}
</script>