el-tree树形按钮排序

实现树形数据的按钮上下排序功能

<template>
  <el-tree
    :data="dtoList"
    :props="defaultProps"
    default-expand-all
    node-key="id"
    :expand-on-click-node="false"
    :highlight-current="true"
  >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <!-- 树形左侧label -->
      <span>
          {{ data.name }}
      </span>
      <!-- 树形排序按钮 -->
      <span class="btnList">
        <el-button type="success" :disabled="isMoveDown(node, data)"  size="mini" icon="el-icon-download" @click="moveDown(node, data)"></el-button>
        <el-button type="primary" :disabled="isMoveUp(node, data)" size="mini" icon="el-icon-upload2" @click="moveUp(node, data)"></el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      dtoList:  [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    // 上排序按钮是否可以点击
    isMoveUp(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      return !(index > 0);
    },
    // 下排序按钮是否可以点击
    isMoveDown(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      return !(index < children.length - 1);
    },
    // 上排序
    moveUp(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      const movedItem = children.splice(index, 1)[0];
      children.splice(index - 1, 0, movedItem);
      // 解决第一级.setData赋值时的错误提示
      if (!parent.data.children) {
        parent.data = Object.assign({}, parent.data, {
          children: children.slice(),
        });
      } else {
        parent.setData(
          Object.assign({}, parent.data, { children: children.slice() })
        );
        this.findLevelById(this.dtoList, data.parentId, children.slice());
      }
    },
    // 下排序
    moveDown(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      const movedItem = children.splice(index, 1)[0];
      children.splice(index + 1, 0, movedItem);
      // 解决第一级.setData赋值时的错误提示
      if (!parent.data.children) {
        parent.data = Object.assign({}, parent.data, {
          children: children.slice(),
        });
      } else {
        parent.setData(
          Object.assign({}, parent.data, { children: children.slice() })
        );
        this.findLevelById(this.dtoList, data.parentId, children.slice());
      }
    },
    // 递归处理排序
    findLevelById(tree, targetId, children) {
      let found = false; // 标志，表示是否找到相同的 id
      const recursiveSearch = (items) => {
        items.forEach((item) => {
          if (found) {
            // 如果已经找到相同的 id，直接返回，终止循环
            return;
          }
          if (item.id === targetId) {
            item.children = children;
            found = true; // 找到相同的 id，设置标志为 true
            return;
          }
          if (item.children && item.children.length > 0) {
            recursiveSearch(item.children);
          }
        });
      };
      recursiveSearch(tree);
    },
  },
};
</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>