项目中有几个页面都涉及了排序且都是前端排序，为了方便高效，将所有的排序方式整理成一个数组放在公共的js文件中

dictionary.js

// 排序数组

let rankType = [

  {

    key: 'rank', // 这个是后端返回数据中的某个字段

    value: '按排序字段排序'

  },

  {

    key: 'name', // 中英文大小写数字字母等组合的名称排序

    value: '按名称排序'

  },

  {

    key: 'createtime', // 后端返回的数据中的字段

    value: '按创建时间排序'

  },

  {

    key: 'updatetime', // 后端返回的数据中的字段

    value: '按修改时间排序'

  }

]

let dict = {

  rankType

}

export function getStatusList (dic) { // 判断当前文件夹中是否存在该变量

  if (dict[dic]) {

    return dict[dic]

  } else {

    console.error('不存在dic:' + dic)

  }

}

使用页面
<template>
    <div>
        <!-- 排序下拉框 -->
        <div>
            <span class="rank">
            {{rankList[activeRankIndex].value}}<Icon class="icon" type="md-arrow-dropdown" />
            <ul class="rank-list">
              <li
                class="rank-item"
                v-for="(item,index) in rankList"
                :key="item.key"
                @click="activeRankIndex=index"
              >{{item.value}}</li>
            </ul>
          </span>
        </div>
        <!-- 数据列表 -->
        <div>
            <ul calss="list">
                <li v-for="(item,index) in showList" :key="item.id">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { getStatusList } from 'plugins/dictionary.js' // 引用自定义的排序数据

// 每个排序方法对应的function
const sortObj = {
    // 根据rank字段排序
  rank: (a, b) => {
    return a.rank - b.rank
  },
    // 根据name字段排序
  name: sortMixArr, // utils.js中自定义的方法
    // 根据创建时间排序
  createtime: (a, b) => {
    return new Date(b.createtime).getTime() - new Date(a.createtime).getTime()
  },
    // 根据修改时间排序
  updatetime: (a, b) => {
    return new Date(b.updatetime).getTime() - new Date(a.updatetime).getTime()
  }
}
const rankList = getStatusList ('rankType').map(item => {
  return {
    ...item,
    sort: sortObj[item.key] // 给每个排序方法绑定对应的function
  }
})

export default {
    data () {
      return {
        activeRankIndex: 0, // 排序下拉框中默认选中的排序方式
        rankList: rankList, // 排序数组
        list:[] // 后端返回的数据列表
      }
    },
 computed: {
    showList () {
       let list = (this.list && this.list.length) ? this.list.filter(item => {
        return item.name !== undefined && item.name !== null 
       }) : []
      let selected = this.rankList[this.activeRankIndex]
      return selected.key === 'name' ? selected.sort(list, 'name') : list.sort(selected.sort)
    } 
 }
    
}
</script>

 根据名称排序，因为名称可能存在中英文，数字，字母等混合字符单独写了一个名称排序的方法

utils.js文件夹

/**
 * 对指定字段为混杂字符串（数字，字母，中文等）的对象数组排序，顺序为首字符数字>字母>中文
 * @param {*} arr 要排序的对象数组
 * @param {*} field 排序依据的字段名
 */
export function sortMixArr (arr, field) {
  if (!(arr && arr.length) || !field) {
    return arr
  }
  let nums = []
  let letters = []
  let others = []

  arr.forEach(item => {
    if (/^[a-zA-Z]+[\s\S]*$/.test(item[field])) { // 字母校验
      letters.push(item)
    } else if (/^[0-9]+[\s\S]*$/.test(item[field])) { // 数字校验
      nums.push(item)
    } else {
      others.push(item)
    }
  })
  return [].concat(nums.sort((a, b) => {
    return a[field] - b[field]
  }), letters.sort((a, b) => {
    return a[field].localeCompare(b[field], 'zh')
  }), others.sort((a, b) => {
    return a[field].localeCompare(b[field], 'zh')
  }))
}