uview2.0组件给的结构并不是后台给的那种二维数组对象结构,并且右侧A-Z索引不想要I、O、U、V字母
效果图
<u-index-list :indexList="indexList" activeColor="#12BE7B"> <template v-for="(item, index) in itemArr"> <!-- #ifdef APP-NVUE --> <u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor> <!-- #endif --> <u-index-item :key="index"> <!-- #ifndef APP-NVUE --> <u-index-anchor :text="indexList[index]"></u-index-anchor> <!-- #endif --> <view class="list" v-for="(item1, index1) in item" :key="index1" @click="onClickSearch(item1.yj_title)"> <view class="list__item"> <text class="list__item__user-name">{{item1.yj_title}}</text> </view> <u-line></u-line> </view> </u-index-item> </template> </u-index-list>
const indexList = () => { const indexList = []; const charCodeOfA = 'A'.charCodeAt(0); for (let i = 0; i < 26; i++) { indexList.push(String.fromCharCode(charCodeOfA + i)); } // indexList.push('#') indexList.splice(indexList.indexOf('I'), 1); indexList.splice(indexList.indexOf('O'), 1); indexList.splice(indexList.indexOf('U'), 1); indexList.splice(indexList.indexOf('V'), 1); return indexList; }
dataLists() { // 请求接口 this.Req(' 请求接口 ', {}, 'POST') .then(res => { console.log('res', res) if (res.code == 200) { let cityArr = {}; res.data.data.forEach(item => { if (!cityArr[item.yj_pinyin]) { cityArr[item.yj_pinyin] = []; } cityArr[item.yj_pinyin].push(item); }); this.itemArr = Object.values(cityArr); } else { console.log('请求失败') } }).catch(err => { console.log('请求失败', err) }) },