解决vue elementUI table中字符串和数字混合排序

解决vue elementUI table中字符串和数字混合排序

在最近的项目中，有个表格的排序因为存在字符串导致排序出现错误，网上找了半天只找到了一个CSDN推荐的，但是那个方法对于当前项目并不可用，不过大家也可以去借鉴一下

https://blog.csdn.net/qq_39186346/article/details/103861876

项目需求：

在每月数据中，因为没有该月份数据，前端需要使用“-”替换，但是在使用了sortable排序功能后，因为是数字和字符串混合，会导致排序存在错误

于是，我们直接在表格头部使用 @sort-change=“sortChange”：

然后在methods中定义该方法：

// 自定义排序
    sortChange (column) {
      /**
       * 思路：
       * 首先将空值或者说不符合要去的行数据过滤掉，形成新的数组
       * 对新的数组进行常规升/降序排序，根据传入的column.order判断是升序还是降序 let sortingType = column.order
       * 如果点击表头取消排序也需要做判断，将数据还原成接口返回的数据
       *
       */
      let _this = this
      let tempTableList = []
      let tempTableData = []
      // 获取字段名称和排序类型
      let fieldName = column.prop
      let sortingType = column.order
      // 过滤出不符合排序的数据形成新数组，最后将新数组的数据放入到排序后的数组中，保证数据的完整性
      tempTableList = Object.assign([], _this.tableData.filter(el => (el[fieldName] === '-' || el[fieldName] === undefined)))
      // 过滤出符合排序的数据形成新数组，再对该数组进行常规排序
      tempTableData = Object.assign([], _this.tableData.filter(el => (el[fieldName] !== '-' && el[fieldName] !== undefined)))
      // 按照降序排序
      if (sortingType !== null) {
        if (sortingType === 'descending') {
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => b[fieldName] - a[fieldName])
          // 将不符合排序的数组重新放入排序完成的数组末尾，保证数据完整
          tempTableData.reverse()
          tempTableList.forEach(el => {
            tempTableData.push(el)
          })
          tempTableData.reverse()
        } else { // 按照升序排序
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => a[fieldName] - b[fieldName])
          // 将不符合排序的数组重新放入排序完成的数组末尾，保证数据完整
          tempTableList.forEach(el => {
            tempTableData.push(el)
          })
        }
        _this.tableData = Object.assign([], tempTableData)
      } else {
        // 如果是取消排序，则将数据还原成接口返回的数据
        _this.tableData = Object.assign([], _this.allTableData)
      }
    }

总体思路还是简单的将不符合排序要求的数据线过滤出去，在将数据排序，排序完成后再将原先过去过去的数据push回表格数组中。
这里因为项目需求相对简单，但是同样的，如果是存在中英文、大小写和数字混合的情况，也可以使用@sort-change方法，通过正则判断是中英文、大小写还是数字，如果是中英文、大小写，则转换成对应的ASCII值再进行比较
如果是时间的排序，需要将日期转换成时间戳再进行比较，但是需要记住排序完成后需要将数据中的时间戳再转换成对应的时间，否则前端显示会有错误

仅供参考，有问题欢迎指出