ag-grid-vue3排序使用自定义字段

在Ag-Grid Vue3中，如果你想利用自定义字段进行排序，首先你需要在列定义中配置`sortable`属性为`true`，同时提供一个`sortComparator`或`valueGetter`属性。如果你使用的是简单的比较操作，可以使用`sortComparator`，如果是获取排序依据的计算结果，可以使用`valueGetter`。

以下是一个例子，假设我们有一个自定义对象，其字段包含两个属性，如`name`和`age`，我们可以创建一个自定义的排序函数来按自定义字段排序：

<template>
  <ag-grid-vue :gridOptions="gridOptions" />
</template>

<script>
import { AgGridVue } from '@ag-grid-community/vue';

export default {
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridOptions: {
        columnDefs: [
          {
            headerName: '自定义字段',
            field: 'customField', // 自定义字段名
            sortable: true,
            // 使用sortComparator自定义排序函数
            sortComparator: (a, b) => {
              if (a.customField.name > b.customField.name) {
                return 1;
              }
              if (a.customField.name < b.customField.name) {
                return -1;
              }
              return 0; // 如果相等则保持原顺序
            },
          },
          // 其他列...
        ],
        rowData: [], // 初始化数据
      },
    };
  },
};
</script>

在这个例子中，当你点击自定义字段列头时，`sortComparator`会被自动调用来确定行的排序顺序。如果`valueGetter`更合适你的场景，你可以替换`sortComparator`，并提供一个返回值的函数，该值将用于排序。