<el-table v-loading="loading"
v-if="id=='Z_C'"
:data="userList"
@sort-change='sort_change'>
<el-table-column label="BG"
sortable='custom'
align="center" key="BG" prop="BG"/>
<el-table-column label="BU" align="center" key="BU" prop="BU"/>
</el-table>
sort_change(column) {
this.proptype = column.prop;
if (column.order === "descending") {
this.order = 1
this.userList.sort(this.sortDevName);
} else if (column.order === "ascending") {
this.order = -1
this.userList.sort(this.sortDevName);
}else{
this.userList = JSON.parse(JSON.stringify(this.userList))
}
// 解决sort排序后强制转换null为“null”字符串类型，导致页面表格展示null字符串
for (let i = 0; i < userList.length; i++) {
for (let key in userList[i]) {
if(userList[i][key] === 'null'){
userList[i][key]=null
}
}
}
},
sortDevName(str1, str2,a) {
let res = 0
str1[this.proptype] = String(str1[this.proptype])
str2[this.proptype] = String(str2[this.proptype])
if(str1[this.proptype] !== '' && str2[this.proptype] === ''){
return -1
}else if(str2[this.proptype] !== '' && str1[this.proptype] === ''){
return 1
}else{
for (let i = 0; ;i++) {
if (!str1[this.proptype][i] || !str2[this.proptype][i]) {
res = str1[this.proptype].length - str2[this.proptype].length
break
}
const char1 = str1[this.proptype][i]
const char1Type = this.getChartType(char1)
const char2 = str2[this.proptype][i]
const char2Type = this.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
}
}
}
res = this.order * res
return res
},
getChartType(char) {
// 数字可按照排序的要求进行自定义，我这边产品的要求是
// 数字（0->9）->大写字母（A->Z）->小写字母（a->z）->中文拼音（a->z）
if (/^[\u4e00-\u9fa5]$/.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]
},
注意：这里数字排序 涉及到小数点。排序会出现诡异情况，需要在column列设置sort-method。
<el-table-column
sortable
:sort-method="(a,b)=>{return a.num-b.num}"
>
