<el-table v-loading="loading"
v-if="id=='Z_C'"
:data="userList"
@sort-change='sort_change'>
<el-table-column label="BG"
sortable
:sort-method="sortDevName"
align="center" key="BG" prop="BG"/>
<el-table-column label="BU" align="center" key="BU"
sortable
:sort-method="sortDevName"
prop="BU"/>
</el-table>
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]
},
sortDevName(str1, str2) {
let res = 0
this.proptype = Number(this.proptype)
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 if (this.isNum(str1[this.proptype]) && this.isNum(str1[this.proptype])) {
if (/^(-?\d+)(\.\d+)?$/.test(str1[this.proptype]) && /^(-?\d+)(\.\d+)?$/.test(str2[this.proptype])) {
// 如果都为负数小数,则计算需要反过来
if (this.order) {
return str1[this.proptype] - str2[this.proptype]
}
return str2[this.proptype] - str1[this.proptype]
} else {
if (this.order) {
return str2[this.proptype] - str1[this.proptype]
}
return str1[this.proptype] - str2[this.proptype]
}
} 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
},
isNum(val) {
// 判断是否为数值类型
return /^-?\d+$/.test(val) || /^(-?\d+)(\.\d+)?$/.test(val)
},
sort_change(column) {
console.log(column)
this.proptype = column.prop
if (column.order === 'descending') {
this.order = 1
} else if (column.order === 'ascending') {
this.order = -1
}
},
借鉴于 https://www.jianshu.com/p/a24ed309214b