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

bfhwhh0e  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(45)

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

  • el-table

Element Plus Playground

Steps to reproduce

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

What is Expected?

按照排序的顺序进行排列

What is actually happening?

未能识别 “100%”

Additional comments

(empty)

ktca8awb

ktca8awb1#

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

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

8fsztsew

8fsztsew2#

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

cyej8jka

cyej8jka3#

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

🆗,谢啦

相关问题