[Component] [table] el-table sortable 排序问题

[smallShy]

Bug Type: Component

Environment

• Vue Version: 3.2.47
• Element Plus Version: 2.3.2
• Browser / OS: chrome 111.0.5563.148 / window 10
• Build Tool: Vite

Reproduction

Related Component

• el-table

Reproduction Link

Element Plus Playground

Steps to reproduce

点击排序按钮时，参数中没有 “100%” 的可以按照顺序排列，当列中有 “100%” 的时候，则排序出现问题

What is Expected?

按照排序的顺序进行排列

What is actually happening?

未能识别 “100%”

Additional comments

(empty)

[zzyyu]

看起来是按照文本排序的，1是排在8前面的，下面是一个demo，9排在了7后面，并没有转成数字再排序

如果需要按数字排序，可以使用 sort-method 或者 sort-by 使用自定义的排序规则

[zzyyu]

demo如下

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable :sortMethod="sortMethod"/>
      <el-table-column prop="address" label="Address" sortable />
    </el-table>

const sortMethod = (a, b) => {
  if (parseInt(a.name) < parseInt(b.name)) {
    return -1
  }
  if (parseInt(a.name) > parseInt(b.name)) {
    return 1
  }
  return 0
}

Element Plus Playground

[smallShy]

demo如下

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable :sortMethod="sortMethod"/>
      <el-table-column prop="address" label="Address" sortable />
    </el-table>

const sortMethod = (a, b) => {
  if (parseInt(a.name) < parseInt(b.name)) {
    return -1
  }
  if (parseInt(a.name) > parseInt(b.name)) {
    return 1
  }
  return 0
}

Element Plus Playground

🆗，谢啦