vue A-Zアルファベットでデータをソート

import { makePy } from "../assets/js/pinying"//                  
export default {
    name: 'SelectGame',
    components: {},
    data() {
        return{
            pageStatus: 'loading', //    
            searchGameName: '', //     
            games: [], //    
            gameList: [], //    
            hotGameList: [], //    
            selectGameIndex: 0, //          
            offsetTopArr: [], //    head offsetTop
            selectedGame: [], //
        }
    },
    computed: {

    },
    directives: {
        focus: {
            //      
            inserted: function(el) {
                el.focus();
            }
        }
    },
    created() {
        this.initData();
    },
    mounted() {
        this.initGameData();
        window.addEventListener("scroll", this.pageScroll);
    },
    methods: {
        /**
        *        
        */
        initData() {
            let data = {
                gameList: [
                    {id: "0", app_name: "    "},
                    {id: "1", app_name: "      "},
                    {id: "2", app_name: "    "},
                    {id: "17", app_name: "QQ  "},
                    {id: "1261", app_name: "QQ    "},
                    {id: "214", app_name: "    "},
                    {id: "232", app_name: "    "},
                    {id: "236", app_name: "    "},
                    {id: "237", app_name: "    "},
                    {id: "1124", app_name: "    "},
                    {id: "1183", app_name: "    "},
                    {id: "1104", app_name: "     "},
                    {id: "1194", app_name: "    （  ）"},
                    {id: "1243", app_name: "   "},
                    {id: "1266", app_name: "    "},
                    {id: "10006", app_name: "    "},
                    {id: "20063", app_name: "FIFAonline3"},
                ],
                hotGame: [
                    {id: "3", app_name: "    "},
                    {id: "4", app_name: "    "},
                    {id: "5", app_name: "    "}
                ]
            }
            this.pageStatus = 'normal';
            this.games = data.gameList;
            this.picGameData(data.gameList);
            this.hotGameList = data.hotGame;

            this.selectedGame = this.$storage.get(this.$storage.keys.SELECT_GAME) ? this.$storage.get(this.$storage.keys.SELECT_GAME) : [];
        },
        /**
         *          
         * @param data          
         */
        picGameData(data) {
            let gameList = [];
            data.map((item) => {
                //    ,      
                let fristName = makePy(item.app_name)[0].substring(0, 1); //           
                //         
                if (!gameList[fristName]) {
                    gameList[fristName] = [];
                }
                gameList[fristName].push(item)
            });

            this.gameList = Utils.kSort(gameList); //                  
        },
        /**
         *           offsetTop
         */
        initGameData() {
            let headContent = document.querySelectorAll('.game__head'); //           
            let offsetTopArr = [];
            headContent.forEach(item => {
                this.offsetTopArr.push(item.offsetTop);
            })
        },
        /**
         *         
         */
        searchGame () {
            this.$nextTick( () => {
                this.$refs.searchInput.focus();
            })
            let gameList = this.games;
            if (this.searchGameName !== '') {
                gameList = this.games.filter((item) => {
                    return item.app_name.indexOf(this.searchGameName) !== -1
                })
            }
            this.picGameData(gameList);
        },
        /**
        *         
        */
        handleOtherGame() {
            this.dialog = this.$createDialog({
                type: 'comment',
                showClose: true,
                title: '      ',
                prompt: {
                    value: '',
                    placeholder: '       ，      "，"  ...',
                    maxlength: 200,
                    indicator: 'indicator',
                    autoExpand: true
                },
                confirmBtn: {
                    text: '  ',
                    active: true,
                    disabled: true,
                    href: 'javascript:;'
                },
                onConfirm: (e, promptValue) => {
                    let list = [];
                    list = promptValue.toString().split(',');
                    this.$storage.set(this.$storage.keys.SELECT_GAME, list); // 
                    this.$router.go(-1);
                }
            });
            this.dialog.show();
        },
        /**
         *       
         * @param item     item
         */
        handleGame(item) {
            if (this.judgSelectedGame(item)) {
                return
            }
            this.selectedGame.push(item.app_name);
        },
        /**
         *          
         * @param item     item
         */
        judgSelectedGame(item) {
            console.log('judg')
            let count = 0;
            this.selectedGame.map(it => {
                if (it === item.app_name) {
                    count = 1;
                }
            })
            return count > 0 ? true : false;
        },
        /**
         *       
         */
        pageScroll() {
            // let scrollTop = $(window).scrollTop(); //          scrollTop
            // //            
            // let keyIndex = 0;
            // this.offsetTopArr.map((item, index) => {
            //     if (scrollTop >= item - 100) {
            //         keyIndex = index
            //     }
            // })
            // this.selectGameIndex = keyIndex;
        },
        /**
         *         
         * @param index       
         * @param type        
         */
        handleKey(index, type) {
            if (type == 'search'){
                console.log('search')
                this.selectGameIndex = 0;
                $(window).scrollTop(0);
                this.$nextTick( () => {
                    this.$refs.searchInput.focus();
                })
                return
            }
            if (type == 'search'){
                this.selectGameIndex = 0;
                $(window).scrollTop(0);
                return
            } 
            let scrollTop = $(window).scrollTop(); //          scrollTop
            this.selectGameIndex = index;
            let targetOffsetTop = this.offsetTopArr[index];
            $(window).scrollTop(targetOffsetTop);
        },
        /**
         *     
         */
        handleCancel() {
            this.selectedGame = [];
        },
        /**
         *     
         */
        handelDefine() {
            this.$storage.set(this.$storage.keys.SELECT_GAME, this.selectedGame);
            this.$router.go(-1);
        }
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.pageScroll);
    }
}

utils.js

function kSort (obj) {
    let keys = Object.keys(obj).sort(),
        sortedObj = {};

    for (var i in keys) {
        sortedObj[keys[i]] = obj[keys[i]];
    }

    return sortedObj;
}

export default {
    kSort
}

pinying:https://gitee.com/dou_i_jiang/file_download
Mint UIはA-Zアルファベット順の都市選択リストを実現する:http://www.uxys.com/html/Vue/20191228/26616.html