element表格ascii排序

原创已于 2022-04-26 11:50:15 修改 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-26 11:24:00 首次发布

js 专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何在Element UI的表格组件中实现自定义ASCII排序，包括数字和字符串的排序处理。通过在`el-table-column`中设置`sortMethod`属性，并提供一个兼容数字和字符串的排序函数，可以根据`orgCode`字段进行排序。排序函数逐字符比较ASCII码，确保了排序的准确性，同时支持null值。这种方法对于处理包含不同数据类型的表格数据非常有用。

element表格ascii排序（本地）

ascii码表

在element 表格中在el-table-column加入sortMethod自定义排序方法orgCode是代表此列需要对应的排序字段，可以喝prop不一致

<el-table-column :sort-method="(a,b) => sortMethod(a ,b , 'orgCode')" sortable prop="departName" label="部门" show-overflow-tooltip min-width="130"> </el-table-column>

排序：兼容数字排序和字符串排序（当然有些比如日期排序的，继续往上加if就行了）从第一个字符开始比较ascii 大小，值到最后，不用管字符串长度，null 也是能转ascii码的

/**
     * @description: 排序
     * @param {*} a
     * @param {*} b
     * @return {*}
     */
    sortMethod(a, b, str) {
      if (typeof a[str] === 'number' && !isNaN(a[str])) {
        return Number(a[str]) - Number(b[str])
      } else {
        let length = a[str].length >= b[str].length ? a[str].length : b[str].length
        for (let i = 0; i < length; i++) {
          if (a[str].charCodeAt(i) === b[str].charCodeAt(i)) {
            console.log('相等')
          } else {
            return a[str].charCodeAt(i) - b[str].charCodeAt(i)
          }
        }
      }
    },