vue element tree 上移下移

效果图

需求是：上边没有了应该取最后一个    下边没有了 应该取第一个

直接上代码；

<template>

 <el-tree

      :key="tree_key"

      v-loading="treeLoading"

      :data="data"

      node-key="id"

      :props="defaultProps"

      :default-expanded-keys="defaultExpand"

      :highlight-current="true"

      :expand-on-click-node="false"

    >

      <span slot-scope="{ node, data}" class="custom-tree-node">

        <div>

          <span

            v-if="data.children"

            class="el-icon-folder-opened"

          >  </span>

          <span v-else class="el-icon-folder" style="margin-right: 3px"></span>

          <span>{{ node.label }}</span>

        </div>

        <span class="button">

          <el-button v-if="data.level<5" type="text" :disabled="data.type===1" size="mini" @click="() => append(data)"><i class="el-icon-plus" /> </el-button>

          <el-button :disabled="data.type===1" type="text" size="mini" @click="() => edit(data)"> <i class="el-icon-edit-outline" /> </el-button>

          <el-button :disabled="data.type===1" type="text" size="mini" @click="() => remove( data)"><i class="el-icon-delete" /> </el-button>

          <el-button :disabled="data.type===1" type="text" size="mini" @click="() => sortMove(1,data,node)"> <i class="el-icon-top" /></el-button>

          <el-button :disabled="data.type===1" type="text" size="mini" @click="() => sortMove(2,data,node)"> <i class="el-icon-bottom" /></el-button>

          <!-- <el-button v-if="data.level<5&&data.type!==1" type="text" :disabled="data.type===1" size="mini" @click="() => append(data)"><i class="el-icon-plus" /> </el-button>

          <el-button v-if="data.type!==1" :disabled="data.type===1" type="text" size="mini" @click="() => edit(data)"> <i class="el-icon-edit-outline" /> </el-button>

          <el-button v-if="data.type!==1" :disabled="data.type===1" type="text" size="mini" @click="() => remove( data)"><i class="el-icon-delete" /> </el-button>

          <el-button v-if="data.type!==1" :disabled="data.type===1" type="text" size="mini" @click="() => sortMove(1,data,node)"> <i class="el-icon-top" /></el-button>

          <el-button v-if="data.type!==1" :disabled="data.type===1" type="text" size="mini" @click="() => sortMove(2,data,node)"> <i class="el-icon-bottom" /></el-button> -->

        </span>

      </span>

    </el-tree>

</template>

<script>

    sortMove(type, data, node) {

      if (type === 1) {

        this.nodeUp(data, node);// 上移

      } else if (type === 2) {

        this.nodeDown(data, node);// 下移

      }

    },

    nodeUp(data, node) {

      const parent = node.parent;

      let configData = {

        from_id: '',

        to_id: ''

      };

      /*

      * node.parent.childNodes

      * <1 不移动

        >1 根据data.id findIndex node.parent.childNodes  找出索引

           索引

           0

           长度-1

      */

      const children = parent.data.children || parent.data;

      const cIndex = children.findIndex(d => d.id === data.id);

      if (parent.level === 0 && cIndex === 0) {

        return;

      } else if (parent.level !== 0 && cIndex === 0) {

        // 不同父节点中移动

        if (node.parent.childNodes.length <= 1) {

          this.$message.error('只能在同一父节点中移动!');

          return;

        } else if (node.parent.childNodes.length > 1) {

          const lastId = node.parent.childNodes.slice(-1).map(item => item.key);

          configData = {

            from_id: data.id,

            to_id: lastId.toString()

          };

        }

      } else if (

        (parent.level === 0 && cIndex !== 0) ||

        (parent.level !== 0 && cIndex !== 0)

      ) {

        const tempChildrenNodex1 = children[cIndex - 1];// to_id

        const tempChildrenNodex2 = children[cIndex]; // from_id

        configData = {

          from_id: tempChildrenNodex2.id,

          to_id: tempChildrenNodex1.id

        };

        this.defaultExpand[0] = data.id;

      }

      this.initRealodTree(configData); //请求后端接口方法

      this.tree_key++;

    },

    nodeDown(data, node) {

      const parent = node.parent;

      let configDataDown = {

        from_id: '',

        to_id: ''

      };

      const children = parent.data.children || parent.data;

      const cIndex = children.findIndex(d => d.id === data.id);

      const cLength = children.length - 1; // 最边上的节点

      const allLevel = node.parent.childNodes.length;

      if (parent.level === allLevel && cIndex === cLength) {

        // 最最末的节点

        this.$message.error('处于最低端不能在下移动!');

        return;

      } else if (parent.level !== allLevel && cIndex === cLength) {

        // 父节点不同

        if (node.parent.childNodes.length <= 1) {

          this.$message.error('只能在同一父节点中移动!');

          return;

        } else if (node.parent.childNodes.length > 1) {

          configDataDown = {

            from_id: data.id,

            to_id: node.parent.childNodes[0].key

          };

        }

      } else if (

        (parent.level === allLevel && cIndex !== cLength) ||

        (parent.level !== allLevel && cIndex !== cLength)

      ) {

        // 父节点相同

        const tempChildrenNodex1 = children[cIndex + 1];

        const tempChildrenNodex2 = children[cIndex];

        configDataDown = {

          from_id: tempChildrenNodex2.id,

          to_id: tempChildrenNodex1.id

        };

        this.defaultExpand[0] = data.id;

      }

      this.initRealodTree(configDataDown);//请求后端接口方法

      this.tree_key++;

    },

   initRealodTree(){}

</script>

vue element tree 上移下移的相关教程结束。