입문

Ant Design Vue의Table 문서를 볼 때
수의 오름차순, 내림차순 정렬 방법에 대한 기록이 있다
문자열의 오름차순 및 내림차순 정렬 방법이 없습니다.
문자열의 오름차순, 내림차순 정렬은 소박하지만
앞으로도 설치가 필요할 것 같아요.
설치 방법 을 남기고 싶습니다.
또한 이 보도 내용을 적용하면 문자열의 오름차순, 내림차순뿐만 아니라
더 복잡한 조건에 따라 정렬할 수도 있다

어떻게 문자열의 오름차순과 내림차순으로 표 줄을 배열합니까

a-table 라벨columns 속성에 전달된 열 정보를 기재한 그룹 내의 속성에서
추가sorter를 통해 행 정렬 가능
SortableTable.vue

<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :items="data"
    >
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "age",
    dataIndex: "age",
    sorter: (a, b) => {
      // 数の昇順・降順ソート
      return a.age - b.age;
    }
  },
  {
    title: "name",
    dataIndex: "name",
    sorter: (a, b) => {
      // 文字列の昇順・降順ソート
      const aName = a.name;
      const bName = b.name;

      // JavaScript の sort 関数を使用して昇順でソートする
      const first = [aName, bName].sort()[0];

      // sort 関数の結果の先頭が昇順の先頭なので、
      // aName と一致するかチェックし先頭だったら 1、そうでなかったら -1 とする
      return first == aName ? -1 : 1;
    }
  }
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    name: `Edrward ${i}`,
    age: 100 - i
  });
}
export default {
  data() {
    return {
      data,
      columns
    };
  }
};
</script>

sorter내 반환 값이 0일 경우 정렬되지 않음
-1이면 비교 전의 값을 시작으로 가져옵니다.
1이면 비교 후 값을 시작으로
따라서 수량이라면 간단하게a.age - b.age 정렬할 수 있다
문자열도 길이별로 정렬할 수 있음a.name.length - b.name.length
그러나 사전 순서대로 복잡한 조건을 정렬하는 상황에서
이번처럼 반환 값을 명확히 지정해야 합니다.

끝내다

더 나은 해결책이 있다면 알려주세요

참조 링크

Table - Ant Design Vue

Array.prototype.sort() - JavaScript - MDN - Mozilla