el-table中文排序-前端

 使用el-table的sort-change事件，例如代码中的@sort-change="sortTable"，

给el-table-column添加sortable、sort-method（如不添加这个属性就无效）

:sortable="sortableList.includes(item.fieldNameEn) ? true : false"

:sort-method="sortableList.includes(item.fieldNameEn) ? compare(item.fieldNameEn,'ascending') : ()=>{}"

<el-table
        style="width: 100%; font-size: 16px"
        ref="checkingTable"
        :height="'100%'"
        :data="tableData"
        :header-cell-style="{
          background: '#ebebeb',
          color: '#1E1E1E',
          fontSize: '16px',
        }"
        @row-click="
          (row, column, e) => {
            handleClick(row, true);
          }
        "
        @selection-change="handleSelection"
        highlight-current-row
        :key="componentKey"
        @sort-change="sortTable"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <!-- 自定义列设置 -->
        <template v-for="item in columnConfig['11']">
          <el-table-column
            v-if="item.hide"
            :key="item.fieldNameCn"
            :show-overflow-tooltip="true"
            :prop="item.fieldNameEn"
            :label="item.fieldNameCn"
            :width="item.width"
            :align="item.location"
            :header-align="item.location"
            :sortable="sortableList.includes(item.fieldNameEn) ? true : false"
            :sort-method="sortableList.includes(item.fieldNameEn) ? compare(item.fieldNameEn,'ascending') : ()=>{}"
          >
            <template slot-scope="scope">
              <span v-if="item.fieldNameCn == '标记'" class="pn-wrapper">
                <span class="label-wrapper">
                  <span
                    class="labelBox"
                    v-for="(val, index) in scope.row.nursingLabelSetDtoList"
                    :key="index"
                    :style="{
                      width: val.labelCssJson['width'] + 'px',
                      height: val.labelCssJson['height'] + 'px',
                      fontSize: val.labelCssJson['fontSize'] + 'px',
                      color: val.labelCssJson['color'],
                      backgroundColor: val.labelCssJson['backgroundColor'],
                      borderRadius: val.labelCssJson['borderRadius'] + 'px',
                    }"
                    >{{ val.labelDesc }}
                  </span>
                  <!-- <span
                    class="emgcLabel_wq"
                    v-if="scope.row.emergencySign == '20175479914889216'"
                    >急诊</span
                  > -->
                  <span
                    v-if="
                      scope.row.callingStatus == '287300077070843904' &&
                      userInfo.userRoleType == NURSEROLE
                    "
                    class="slowLabel_wq"
                    >缓
                  </span>
                  <span
                    v-if="
                      scope.row.callingStatus == '50315912372289536' &&
                      userInfo.userRoleType !== NURSEROLE
                    "
                    class="slowLabel_wq"
                    >缓
                  </span>
                </span>
              </span>
              <span v-else>{{ scope.row[item.fieldNameEn] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column width="60px">
          　　<template slot="header">
            <i
              class="el-icon-s-tools"
              @click="checkSetting"
              style="font-size: 20px; cursor: pointer"
            ></i>
            　　</template
          >
        </el-table-column>
      </el-table>
methids:{
    sortTable(sortObj) {
      const { prop, order } = sortObj;
      this.tableData.sort(this.compare(prop, order));
    },
    compare(propertyName, sort) {
      // 判断是否为数字
      function isNumberV(val) {
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg =
          /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if (regPos.test(val) || regNeg.test(val)) {
          return true;
        } else {
          return false;
        }
      }
      // 处理空值
      function handleEmptyValues(value1, value2, sort) {
        const isEmpty1 = value1 === null || value1 === undefined || value1 === '';
        const isEmpty2 = value2 === null || value2 === undefined || value2 === '';

        if (isEmpty1 && isEmpty2) return 0; // 两个都是空值，视为相等
        if (isEmpty1) return sort === 'ascending' ? -1 : 1; // 将空值放在前面或后面
        if (isEmpty2) return sort === 'ascending' ? 1 : -1; // 将空值放在前面或后面

        return null; // 如果都不是空值，继续其他比较
      }

      return function (obj1, obj2) {
        let value1 = obj1[propertyName];
        let value2 = obj2[propertyName];

        // 首先处理空值
        const emptyCheckResult = handleEmptyValues(value1, value2, sort);
        if (emptyCheckResult !== null) return emptyCheckResult;

        // 数字类型的比较
        if (isNumberV(value1) || isNumberV(value2)) {
          if (sort === "ascending") {
            return value1 - value2;
          } else {
            return value2 - value1;
          }
        }
        // 布尔值的比较：利用减法-转化true 和 false
        // true => 1   false ⇒ 0
        // true-false => 1  false-true => -1
        // 下面方法是按照先false后true的顺序排序，如果想先true后false，调整value1-value2 和  value2 - value1的顺序即可
        else if (value1 instanceof Boolean && value2 instanceof Boolean) {
          if (sort === "ascending") {
            return value1 - value2;
          } else {
            return value2 - value1;
          }
        }
        // 字符比较使用localeCompare()
        else {
          const res = value1.localeCompare(value2, "zh");
          return sort === "ascending" ? res : -res;
        }
      };
    },


}