Как реализовать восходящий или нисходящий в таблице с муравей vue?

Question

Когда вы нажимаете ↑ во второй строке, B перемещается к первой строке, а A - ко второй строке.Когда вы нажимаете ↓ в первой строке, B перемещается во вторую строку, A перемещается в первую строку, и каждая строка щелкает восходящее нисходящее событие.Как решить вышеуказанную проблему?

нажмите ↑

нажмите ↓

Мой код:

<template>
  <a-table :columns="columns" :dataSource="data" @change="onChange">
    <template slot="sort" slot-scope="text, record">
      <span @click="orderFn(record)">↑</span>
      <span @click="orderFn(record)">↓</span>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: "Name",
    dataIndex: "name"
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "sort",
    dataIndex: "sort",
    scopedSlots: { customRender: "sort" },
    align: "center"
  }
];

const data = [
  {
    key: "1",
    name: "A",
    age: 10
  },
  {
    key: "2",
    name: "B",
    age: 20
  },
  {
    key: "3",
    name: "C",
    age: 30
  },
  {
    key: "4",
    name: "D",
    age: 40
  }
];

function onChange(pagination, filters, sorter) {
  console.log("params", pagination, filters, sorter);
}

export default {
  data() {
    return {
      data,
      columns
    };
  },
  methods: {
    onChange,
    orderFn(record){
      console.log(record)
    }
  }
};
</script>

Демонстрация выглядит следующим образом: codesandbox