el-table sort-method

el-table默认的排序方式按照Unicode编码,对于中文混合数据排序不准确。本文介绍如何通过sort-method实现符合预期的自定义排序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

el-table本身具备排序属性:sortable,默认值为true,则开启排序

但是,此排序是按照字符Unicode编码格式排序的,所以如果该列是中文或者中文和其他字符的混合物的时候,通过sortable提供的排序出来的结果,不符合我们的预期。接下来的代码可以解决该问题,希望可以给大家提供帮助,也给为自己记录下来。

  <el-table
    :data="tableData"
    style="width: 100%"
    :key="tableKey"
    border
    @header-click="handleHeaderClick"
  >
    <el-table-column prop="date" label="日期" :sortable="true" width="180"></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      :sortable="true"
      width="180"
      :sort-method="actionAdmin"
      :default-sort="{prop: 'name'}"
    ></el-table-column>
</el-table>

<script>
export default {
    methods: {
      actionAdmin(str1, str2) {
        let res = 0
        str1 = str1.name
        // console.log("str1:", str1)
        // console.log("str2:", str2)
        str2 = str2.name
        for (let i = 0; ; i++) {
          if (!str1[i] || !str2[i]) {
            res = str1.length - 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值