antdesign Vue中table树嵌套表实现二级单独排序

<a-table :columns="columns" :data-source="data">
	<template #bodyCell="{ column, record, index }"> //record.children是二级树的数据
        <template v-if="Array.isArray(record.children) && record.children.length">
          <div class="sorterSecond">
            <span class="text">{{ record[column.dataIndex] }}</span>
            <div class="sorterIcon" @click="sorterClick(column, record, index)">
              <Icon
                :size="10"
                icon="ant-design:caret-up-outlined"
                :color="sorterIndex === 1 && dataIndex === column.dataIndex && activeIndex === index ? '#1890ff' : '#bfbfbf'"
              />
              <Icon
                :size="10"
                icon="ant-design:caret-down-outlined"
                :color="sorterIndex === 2 && dataIndex === column.dataIndex && activeIndex === index ? '#1890ff' : '#bfbfbf'"
              />
            </div>
          </div>
        </template>
      </template>
</a-table>

<script setup>
// 二级排序

  let dataIndex = ref('');
  let sorterIndex = ref(0);
  let cloneChildren = ref([]);
  let activeIndex = ref(0);
  function sorterClick(column, record, index) {
    if (dataIndex.value !== column.dataIndex || activeIndex.value !== index) {
      dataIndex.value = column.dataIndex;
      activeIndex.value = index;
      cloneChildren.value = cloneDeep(record.children);
      sorterIndex.value = 0;
    }
    sorterIndex.value++;
    if (sorterIndex.value === 3) {
      record.children = [...cloneChildren.value];
      sorterIndex.value = 0;
    } else {
      record.children.sort((a, b) => {
        if (sorterIndex.value === 1) {
          return a[column.dataIndex] - b[column.dataIndex];
        } else if (sorterIndex.value === 2) {
          return b[column.dataIndex] - a[column.dataIndex];
        }
      });
    }
  }
</script>

<style scoped lang="less">
  .sorterSecond {
    display: flex;
    align-items: center;
    justify-content: space-between;

    span.text {
      display: block;
      flex: 1;
    }
    .sorterIcon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
    }
  }
</style>