实现dom的排序与数组的排序功能

1. 对dom的排序

<template>
  <div class="sortLayout">
    <div class="sort" v-for="item in state.arr" :key="item.sortId">
      <div>{{ item.name }} -- {{ item.sortId }}</div>
      <a-button @click="changeSort(item, 'up')" :disabled="item.sortId == 1">
        向上
      </a-button>
      <a-button @click="changeSort(item, 'down')" :disabled="item.sortId == 3">
        向下
      </a-button>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      arr: [],
      sortData: {
        a: {
          sortId: 3,
          name: 'a',
        },
        b: {
          sortId: 1,
          name: 'b',
        },
        c: {
          sortId: 2,
          name: 'c',
        },
      },
    });

    const setSortArr = () => {
      const arr = [];
      for (let key in state.sortData) {
        let sortId = state.sortData[key]['sortId'];
        console.log('sortId', sortId);
        arr[sortId - 1] = state.sortData[key];
      }
      state.arr = arr;

      console.log('arr', arr);
    };

    setSortArr();

    const changeSort = (item, status) => {
      let sortId = item.sortId;
      //   if (status == 'up' && item.sortId == 1) return;
      //   if (status == 'down' && item.sortId == 3) return;
      let arr = state.arr;
      arr = arr.map((sortItem) => {
        let data = { ...sortItem };
        if (status == 'up') {
          if (sortItem.sortId == sortId) data.sortId = data.sortId - 1;
          if (sortItem.sortId - sortId == -1) data.sortId = data.sortId + 1;
        }
        if (status == 'down') {
          if (sortItem.sortId == sortId) data.sortId = data.sortId + 1;
          if (sortItem.sortId - sortId == 1) data.sortId = data.sortId - 1;
        }

        return data;
      });

      arr.forEach((sortItem) => {
        let sortId = sortItem.sortId;
        state.arr[sortId - 1] = sortItem;
      });
    };

    return {
      state,
      changeSort,
    };
  },
};
</script>

2. 对数组中元素位置的排序

<template>
  <div>
    数组中改变元素的位置
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.key === 'sortId'"
          ><div class="sort-box">
            <a-button @click="sortBy('down', index)">向下排序</a-button>
            <a-button @click="sortBy('up', index)">向上排序</a-button>
          </div></template
        >
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref, onMounted, reactive } from 'vue';

export default defineComponent({
  setup() {
    const dataSource = ref([
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
      {
        key: '3',
        name: '胡1',
        age: 15,
        address: '西湖区湖底公园1号',
      },
      {
        key: '4',
        name: '祖3',
        age: 23,
        address: '西湖区湖底公园1号',
      },
    ]);

    const sortBy = (type, index) => {
      if (type == 'up') {
        upGo(dataSource.value, index);
      } else if (type == 'down') {
        downGo(dataSource.value, index);
      }

      // up 上移动一格
      function upGo(fieldData, index) {
        if (index != 0) {
        // splice(index-1,1,fieldData[index])
          // 从第index-1个元素开始执行删除，删除1个，将fieldData[index]作为新元素从删除位置插入数组
          fieldData[index] = fieldData.splice(
            index - 1,
            1,
            fieldData[index],
          )[0];
        } else {
          fieldData.push(fieldData.shift());
        }
      }

      // down 下移动一格
      function downGo(fieldData, index) {
        if (index != fieldData.length - 1) {
          fieldData[index] = fieldData.splice(
            index + 1,
            1,
            fieldData[index],
          )[0];
        } else {
          fieldData.unshift(fieldData.splice(index, 1)[0]);
        }
      }

      // 置顶移动
      function toFirst(fieldData, index) {
        if (index != 0) {
          // fieldData[index] = fieldData.splice(0, 1, fieldData[index])[0]; 这种方法是与另一个元素交换了位子，

          fieldData.unshift(fieldData.splice(index, 1)[0]);
        }
      }
      // 两个元素换位子
      function swapArr(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      }
    };

    return {
      sortBy,
      dataSource,

      columns: [
        {
          dataIndex: 'sortId',
          key: 'sortId',
        },

        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
      ],
    };
  },
});
</script>
<style scoped lang="scss">
.box {
  display: flex;
  .btn {
    display: flex;
  }
}
</style>

上述方法选自：blog.csdn.net/qq_37938892…