el-tabel名称排序问题

el-tabel排序

最终实现功能如下：

排序限制为：
文件夹>普通文件
数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）

正序

倒序

代码如下：

<template>
<div class="personalFiles containerBox">
<div class="personalFileCont">
<el-table
v-loading="loading"
:data="tabelList"
row-key="uuid"
ref="tableRef"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column
label="文件名"
min-width="250"
sortable
:sort-method="sortName"
>
<template slot-scope="scope">
<span
class="cursor-pointer"
>
<img
:src="getIcon(scope.row.name, scope.row.uuid, scope.row.dir)"
alt=""
class="tabelImg"
/>
<span
class="fileNameCont ellipsis"
:class="isCollapse ? 'detailFileName' : ''"
>{{ scope.row.name }}</span
>
</span>
</template>
</el-table-column>
<el-table-column label="最后修改人">xxx</el-table-column>
<el-table-column
label="大小"
sortable
prop="size"
:default-sort="{ prop: 'size', order: 'descending' }"
>
<template slot-scope="scope">
{{ humanFileSize(scope.row.size) }}
</template>
</el-table-column>
<el-table-column
label="修改时间"
prop="updateTime"
sortable
:default-sort="{ prop: 'updateTime', order: 'descending' }"
></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
getMatterPage,
} from "@/api/personalFiles";
import { humanFileSize, isImage } from "@/utils/FileUtil";
import { getIcon } from "@/utils/Matter.js";
import { getChartType } from "@/utils/index";
export default {
name: "spaceDetailList",
props: {
curSpaceObj: {
type: Object,
default: () => {}
}
},
data() {
return {
queryParams: {
page: 1,
pageSize: 10,
puuid: "root",
deleted: false,
orderDir: "DESC",
orderName: "ASC",
spaceUuid: '',
},
total: 0,
loading: false,
tabelList: [],
};
},
mounted() {
this.$nextTick(() => {
this.queryParams.spaceUuid = this.curSpaceObj.uuid
this.getList();
})
},
methods: {
humanFileSize,
getIcon,
isImage,
getList() {
this.loading = true;
getMatterPage({ ...this.queryParams })
.then((res) => {
this.tabelList = res.data.data;
this.total = res.data.totalItems;
})
.finally(() => {
this.loading = false;
});
},
// 排序
sortName(str1, str2) {
let strName1 = str1.name;
let strName2 = str2.name;
let res = 0;
for (let i = 0; ; i++) {
if (!strName1[i] || !strName2[i]) {
res = strName1.length - strName2.length;
break;
}
// 此处判断文件类型 dir-true代表是文件夹
if (str1.dir != str2.dir) {
res = 1;
break;
}
const char1 = strName1[i];
const char1Type = getChartType(char1);
const char2 = strName2[i];
const char2Type = getChartType(char2);
// 类型相同的逐个比较字符
if (char1Type[0] === char2Type[0]) {
if (char1 === char2) {
continue;
} else {
if (char1Type[0] === "zh") {
res = char1.localeCompare(char2);
} else if (char1Type[0] === "en") {
res = char1.charCodeAt(0) - char2.charCodeAt(0);
} else {
res = char1 - char2;
}
break;
}
} else {
// 类型不同的，直接用返回的数字相减
res = char1Type[1] - char2Type[1];
break;
}
}
return res;
},
},
};
</script>
<style lang="scss" scoped>
@import url('@/assets/styles/personalFiles.scss');
</style>

排序使用到的getChartType方法,代码中用到图片和字节转换方法跟当前功能无关就不展示了

// 排序
export function getChartType(char) {
// 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
if (/^[一-龥]$/.test(char)) {
return ["zh", 300];
}
if (/^[a-zA-Z]$/.test(char)) {
return ["en", 200];
}
if (/^[0-9]$/.test(char)) {
return ["number", 100];
}
return ["others", 999];
}