iview中table排序数据混乱的问题

需求：下图中的“现价”以及“涨跌幅”可根据数值大小排序（下面以“现价”为例）

第一次处理：排序触发，但是数据没有排序正确（代码如下）

Html部分：

<div class="list-main">
  <Table stripe
         class="order-table"
         :columns="historyColumns"
         no-data-text=""
         @on-sort-change='changeSort'
         :data="historyData"></Table>
  <div class="select-page">
    <Page :total="stockCount"
          :current="pageIndex"
          :page-size="pageSize"
          :page-size-opts="pageSizeArr"
          prev-text="上页"
          next-text="下页"
          show-elevator
          show-sizer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          class="page-class"></Page>
    <div class="all-page">(共{{allPage}}页)</div>
  </div>
</div>

Js部分：

// data中关于列的配置
{
  title: '现价（元）',
  key: 'price',
  align: 'center',
  fixed: 'left',
  sortable: true,
  sortMethod: (a, b, type) => {
  },
  render: (h, params) => {
    let text = params.row['最新价']
    if (!isNaN(text)) {
      text = Number(text).toFixed(2)
    }
    return h('div', {
      style: {
        'color': params.row['最新涨跌幅'] > 0 ? '#F44336' : '#04cc71',
        'fontWeight': 'bold'
      }
    }, text || '--')
  }
}

// on-sort-change触发的方法，本地用sort排序
// 现价和涨跌幅的排序
changeSort (item) {
  let tempStr = item.key === 'price' ? '最新价' : '最新涨跌幅'
  let tempArr = JSON.parse(JSON.stringify(this.searchStockArr))
  this.searchStockArr = []
  if (item.order === 'asc') {
    // 正序
    this.searchStockArr = tempArr.sort(this.creatCompare(tempStr))
  } else if (item.order === 'desc') {
    // 倒序
    this.searchStockArr = tempArr.sort(this.creatCompare(tempStr)).reverse()
  } else {
    // 正常的数据，在获取到data的时候单独保存一个本地变量
    this.searchStockArr = this.searchNormalStockArr
  }
  // 手动更改当前页的数据，小于每页显示条数则全显，大于每页显示条数，取当前pagesize条数显示
  this.historyData = []
  if (this.pageIndex > 1) {
    let _start = (this.pageIndex - 1) * this.pageSize
    let _end = this.pageIndex * this.pageSize
    this.historyData = this.searchStockArr.slice(_start, _end)
  } else {
    if (this.stockCount < this.pageSize) {
      this.historyData = this.searchStockArr
    } else {
      this.historyData = this.searchStockArr.slice(0, this.pageSize)
    }
  }
},
creatCompare (propertyName) {
  return function (obj1, obj2) {
    let value1 = Number(obj1[`${propertyName}`])
    let value2 = Number(obj2[`${propertyName}`])
    if (value1 < value2) {
      return -1
    } else if (value1 > value2 || value1 === value2) {
      return 1
    }
  }
}

第二次处理：通过数据对比找到问题所在，某些行没有该字段的数据，导致sort排序混乱，更改后本地排序正常（createCompare更改后的代码如下）；但是当chrome的版本低的情况下排序又混乱了

creatCompare (propertyName) {
  return function (obj1, obj2) {
    // 此处用三元表达式的原因：当某个股票对象中没有该字段时，会导致排序错乱
    let value1 = Number(obj1[`${propertyName}`]) ? Number(obj1[`${propertyName}`]) : 0
    let value2 = Number(obj2[`${propertyName}`]) ? Number(obj2[`${propertyName}`]) : 0
    if (value1 < value2) {
      return -1
    } else if (value1 > value2 || value1 === value2) {
      return 1
    }
  }
}

第三次处理：通过API以及代码的重重排查，发现罪魁祸首，在列的配置中，如果要进行远程排序，必须添加sortable: 'custom'，而不是sortable: true（这个远程排序直接用的一个百度的例子，看来API还是非常重要的啊，很多时候不能想着投机取巧走捷径）

{
  title: '现价（元）',
  key: 'price',
  align: 'center',
  fixed: 'left',
  // 此处是“罪魁祸首”
  sortable: 'custom',
  sortMethod: (a, b, type) => {
  },
  render: (h, params) => {
    let text = params.row['最新价']
    if (!isNaN(text)) {
      text = Number(text).toFixed(2)
    }
    return h('div', {
      style: {
        'color': params.row['最新涨跌幅'] > 0 ? '#F44336' : '#04cc71',
        'fontWeight': 'bold'
      }
    }, text || '--')
  }
}