vue table表格每列按数字/字母顺序排序

饱饱~~

已于 2023-03-22 14:29:13 修改

阅读量801

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-10-14 17:42:51 首次发布

本文链接：https://blog.csdn.net/m0_58893670/article/details/127324950

版权

vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

需求：点击每列表头的上下箭头，当前列可进行升降排序

    <table
      :data="equipData"
      class="main-table"
      :sort-order.sync="orderData"
    >
      <table-column
        prop="deviceId"
        sortable
        :sort-method="sort"
        label="设备ID"
        min-width="100"
        fixed="left"
      >
        <template scope="scope">
          <span class="span-label" :title="scope.row.deviceId">{{
            scope.row.deviceId | deviceId
          }}</span>
        </template>
      </table-column>
  
      <table-column
        prop="appId"
        label="从属项目"
        min-width="100"
        sortable
        :sort-method="appid"
      >
      </table-column>
    </table>

// 设备ID
const sort =  (row1, row2) => {
    if(row1.deviceId > row2.deviceId ){
      return 1
    }else{
      return -1
    }
}

// 从属项目
const appid = (str1, str2) => {
    let res = 0
    for (let i = 0; ;i++) {
              if (!str1.appId[i] || !str2.appId[i]) {
        res = str1.length - str2.length
        break
              }
              const char1 = str1.appId[i]
              const char1Type = this.getChartType(char1)
              const char2 = str2.appId[i]
              const char2Type = this.getChartType(char2)
              // 类型相同的逐个比较字符
              if (char1Type[0] === char2Type[0]) {
        if (char1 === char2) {
          continue
        } else {
                  if (char1Type[0] === 'zh') {
          res = char1.localeCompare(char2)
                  } else if (char1Type[0] === 'en') {
          res = char1.charCodeAt(0) - char2.charCodeAt(0)
                  } else {
          res = char1 - char2
                  }
          break
        }
              } else {
              // 类型不同的，直接用返回的数字相减
      res = char1Type[1] - char2Type[1]
      break
              }
    }
    return res
}