解決vue elementUI中table裡數字、字母、中文混合排序問題
阿新 • • 發佈:2020-01-09
1.使用場景
使用elementUI中的table時,給包含數字字母中文的名稱等欄位排序
例如:數字(0->9)->大寫字母(A->Z)->小寫字母(a->z)->中文拼音(a->z)
2.程式碼解析
<el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%" max-height="600"> <el-table-column type="selection" width="60" /> <el-table-column :default-sort = "{prop: 'DevName'}" :sort-method="sortDevName" prop="DevName" label="名稱" sortable show-overflow-tooltip /> </el-table>
設定屬性sortable,會按照自帶的機制排序,不符合我們的預期;
所以增加屬性 sort-method,在方法中自定義排序方式
<script> export default { methods: { sortDevName(str1,str2) { let res = 0 for (let i = 0; ;i++) { if (!str1[i] || !str2[i]) { res = str1.length - str2.length break } const char1 = str1[i] const char1Type = this.getChartType(char1) const char2 = str2[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 } } 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] } } } </script>
3.頁面效果
原列表 ==》》 正序 ==》》 倒序
總結
以上所述是小編給大家介紹的解決vue elementUI中table裡數字、字母、中文混合排序問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!