Ant vue a-tabel实现上移下移功能

<template>
  <div>
    <a-table :row-key="key" :columns="columns" :data-source="data">
      <template slot="operation" slot-scope="text, record, index">
        <a-icon
          type="arrow-up"
          @click="arrowUp(text, record, index)"
          style="padding-right: 5px"
        ></a-icon>
        <a-icon
          type="arrow-down"
          @click="arrowDown(text, record, index)"
          style="padding-right: 5px"
        ></a-icon>
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 存放Ant Table表头
      columns: [
        {
          title: "操作",
          key: "1",
          dataIndex: "operation",
        },
      ],
      // 存放Ant Table的数据
      data: [],
    };
  },
  methods: {
    arrowUp(text, value, index) {
      // 判断Ant Table 当前行的index
      if (index <= 0) {
        console.log("已经是第一条");
      } else {
        let upData = this.data[index - 1];
        this.data.splice(index - 1, 1);
        this.data.splice(index, 0, upData);
      }
    },
    arrowUp(text, value, index) {
      if (index == this.data.length - 1) {
        console.log("已经是最后一条了");
      } else {
        let downData = this.data[index + 1];
        this.data.splice(index + 1, 1);
        this.data.splice(index, 0, downData);
      }
    },
  },
};
</script>