对选中的tree做上下移动操作 需要下标判断当前的位置，用以判断上移下移的显示，和获取上下位置的tree的id
难点：目前不知道当前tree的下标
解决方法：tree有个node，可以获取当前tree所有内容，其中parent.childNodes 可以获取到当前tree的列表，对这个列表循环判断得出下标。
效果： 代码片段：
<el-tree :data="data" :props="defaultProps" node-key="id" @node-click="handleNodeClick" :expand-on-click-node="false" :default-expanded-keys="selectArr" :show-close="false" ref="tree" @node-expand="statusData.actived=false" @node-collapse="statusData.actived=false" > <span class="custom-tree-node" slot-scope="{ node, data }" @click="act(data,node)"> <span>{{ node.label }}</span> <span class="gc-fl-right iconBlock"> <i class="el-icon-more icon" :class="(statusData.pid==data.id&&statusData.actived)?'select':''" @click.stop="editDialog(data)" ></i> <div class="editlayer" v-if="statusData.pid==data.id&&statusData.actived"> <p @click.stop="addsecondary(data.id,data.name)">添加子部门</p> <p @click.stop="editmenu(data.id,data.name)">修改名称</p> <p @click.stop="del(2,data.id,data.name)">删除</p> <p v-if="statusData.treeIndex>0" @click="sort(1,data,node)">上移</p> <p v-if="statusData.treeIndex<(statusData.treeLength-1)" @click="sort(2,data,node)" >下移</p> </div> </span> </span> </el-tree> data(){ return{ statusData: { actived: false, //是否显示tree的操作框 isAdd: 0, //0表格显示 1添加人员显示 2详情显示 3编辑人员显示 pid: 0, //左侧选中的id pName: "", //右侧显示的title total: 0, //右侧显示的人员数量, treeIndex: 0, //选中tree的id treeLength: 0 //选中tree的那层的长度 }, selectArr: [], data: [], //tree数据 defaultProps: { children: "child", label: "name" }, } }, methods: { //切换选项，右侧表格内容更新 act(data, node) { this.statusData.pid = data.id; this.statusData.pName = data.name; this.statusData.actived = false; this.statusData.isAdd = 0; let parentList = node.parent.childNodes; let index = ""; parentList.forEach((item, indexs) => { if (item.key == data.id) { index = indexs; } }); this.statusData.treeIndex = index; //下标 this.statusData.treeLength = parentList.length; }, sort(type, data, node) { let index = this.statusData.treeIndex; let parentList = node.parent.childNodes; let config = { current_id: data.id }; if (type == 1) { config.exchange_id = parentList[index - 1].key; //上移 } else { config.exchange_id = parentList[index + 1].key; //下移 } httpApi .sortDepartment(config) .then(res => { if (res.code == "200") { this.$message({ type: "success", message: res.msg }); this.leftData(data.id); this.statusData.actived = false; } else { this.$message({ type: "warning", message: res.msg }); } }) .catch(err => { this.$message({ type: "warning", message: res.msg }); }); }, } .el-tree { width: 250px; > .el-tree-node { > .el-tree-node__content { .custom-tree-node { span { font-weight: 500; } } } } .el-tree-node__expand-icon.el-icon-caret-right::before { font-size: 16px; color: #999999; } .is-leaf.el-tree-node__expand-icon.el-icon-caret-right::before { display: none; } .el-tree-node__content { height: 38px; line-height: 38px; padding-right: 10px; .custom-tree-node { width: 100%; height: 38px; line-height: 38px; } } .el-tree-node__content:hover { background-color: #fff; } .iconBlock { width: 20px; height: 100%; padding-top: 14px; .icon { display: none; transform: rotate(90deg); } .icon.select { color: #61c5c1; } } .el-tree-node > .el-tree-node__children { overflow: initial; } .is-current > .el-tree-node__content { height: 38px; line-height: 38px; background: #f4f7f6; border-radius: 4px; position: relative; .icon { display: block; } .editlayer { position: absolute; width: 110px; background: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.15); right: -105px; top: 0px; color: #333333; z-index: 1000; padding: 10px; text-align: center; p { height: 34px; line-height: 34px; } p:hover { background: #f4f7f6; border-radius: 4px; } } .icon:hover + .editlayer { display: block; cursor: pointer; } .editlayer:hover { display: block; cursor: pointer; z-index: 1000; } } }