Element UI Table

[Holybasil]

ElementUI Table 使用

version 2.1.0

问题描述

有这样一例数据 需要用el-table渲染

const data = [
  {
    name: "Cake",
    hit: "30.12%"
  },
  {
    name: "Puff",
    hit: "2.13%"
  },
  {
    name: "Chocolate",
    hit: "67.3%"
  }
]

对每一个el-table-column均需设置sortable属性 使其能够排序
由于hit是字符串而要根据百分数的大小排序 所以设置sort-method

sortMethod(a, b){
  return parseFloat(a.hit) > parseFloat(b.hit)
}

此时出现第一个问题
首先 官方承认

然而 在我用的2.1.0版本里 parseFloat(a.hit) > parseFloat(b.hit)是不起作用的 parseFloat(a.hit) - parseFloat(b.hit)才能达到效果

具体问题描述和效果可参考 ElementUI issue 1

以上 第一个问题解决
然而 每次请求拿到的数据一开始都不要受到前端排序的干扰 所以每一次需要先调用el-table的clearSort()方法
那么第二个问题来了
clearSort()针对自定义排序方法不起作用 如果原数据没有用el-table的排序 那么这个方法没有副作用 如果已经用了el-table的排序 那么这个方法会将将数据升序排序

具体问题描述和效果可参考 ElementUI issue 2

解决办法

现阶段（2018.12.25） 采用在给el-table传递data之前
data.map(item=>({...item, hit: parseFloat(item.hit)})) 预处理
然后对于相应的el-table-column 设置formatter ${cellValue}%