1단계 :
@sort-change="sort_change" 이벤트를 el-table에 추가, sort_change는 사용자 지정 정렬 방법입니다. 2단계:
el -table-colum에 sortable="custom"을 추가합니다
. 이 속성을 사용한 후 현재 열을 정렬할 수 있으며 사용자 지정 정렬을 위해 sort_change 메서드가 호출됩니다.
sortFun(attr, rev){
// 第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
if (rev) {
rev = 1;
} else {
rev = -1;
}
let that = this;
return function (a, b) {
let res = 0;
for (let i = 0; ;i++) {
if (!a[attr][i] || !b[attr][i]) {
res = a[attr].length - b[attr].length;
break;
}
let char1 = a[attr][i];
let char1Type = that.getChartType(char1);
let char2 = b[attr][i];
let char2Type = that.getChartType(char2);
// 类型相同的逐个比较字符
if (char1Type[0] === char2Type[0]) {
// console.log('字符类型相同');
if (char1 === char2) {
res = 0;
// console.log('值全等', res);
continue;
} else {
if (char1Type[0] === 'zh') {
res = char1.localeCompare(char2);
// console.log('a的字符类型为中文', res);
} else if (char1Type[0] === 'en') {
res = char1.charCodeAt(0) - char2.charCodeAt(0);
// console.log('a的字符类型为英文', res);
} else {
res = char1 - char2;
// console.log('a的字符类型为数字', res);
}
// console.log('值不相等比较的结果', res);
break;
}
} else {
// 类型不同的，直接用返回的数字相减
var num1 = char1Type[1];
var num2 = char2Type[1];
res = num1 - num2;
break;
}
}
return res * rev;
};
}
sort_change(column) {
// this.currentPage = 1;// return to the first page after sorting
if (column.prop === 'configTemplateName') {
// 对展示的源数据进行重新排序
this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
} else if (column.prop === 'configTemplatePattern') {
// 对展示的源数据进行重新排序
this.configTemplatesFilter.sort(this.sortFun(column.prop, column.order === 'ascending'));
}
// 排序完显示到第一页
this.handleCurrentChange(this.currentPage);
}
getChartType(char) {
// 数字可按照排序的要求进行自定义 ;数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
if (/^[u4e00-u9fa5]$/.test(char)) {
return ['zh', 3];
}
if (/^[a-zA-Z]$/.test(char)) {
return ['en', 2];
}
if (/^[0-9]$/.test(char)) {
return ['number', 1];
}
return ['others', 4];
}
handleCurrentChange(val) {
this.configTempLoading = true;
this.currentPage = val;
this.configTemplatesView = this.configTemplatesFilter.filter(data => !this.queryParam.configTemplateName || data.configTemplateName.toLowerCase().includes(this.queryParam.configTemplateName.toLowerCase())).slice((val - 1) * this.pageSize, val * this.pageSize);
this.configTempLoading = false;
}
원칙 :
정렬이 트리거될 때 오름차순인지 내림차순인지 확인한 다음 정렬 방법을 사용하여 표시할 소스 데이터 배열(페이징에 의해 필터링되지 않은 데이터)을 재정렬한 다음 데이터 표시를 위해 페이징 필터링을 수행합니다. 참고: 정렬 후 동일한 정렬 아이콘을 다시 클릭하면 column.order의 값이 null입니다
.