项目中有几个页面都涉及了排序且都是前端排序，为了方便高效，将所有的排序方式整理成一个数组放在公共的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')
}))
}
