Vue shuttle box realizes up and down movement

// setLeftAgency: Encapsulated request interface name setLeftAgency(params).then((res) => { // When the returned code == 0, it means success if (res.data.code == 0) {
 let { data } = res.data;
 data.forEach((item) => { //Traverse the returned data. If this parameter is Item, add nocheck=true to the current data so that the checkbox will not be displayed.
 if(item.Type!=='Item'){
  item.nocheck=true
 }
 // delete item.children;
 });
 this.parentNodes = data; // Put the modified data in the array and render it again}

<div class="leftTree"> // The onCreated bound here is the initialization function of the left tree, and parentNodes stores all the data of the left tree<ztree :setting="setting" @onCreated = 'onCreated' :parentNodes="parentNodes"></ztree>
</div>
<div class="centerBtn">
 <el-button type="danger" plain icon="el-icon-arrow-right" @click="moveTable"></el-button>
 <el-button type="danger" plain icon="el-icon-d-arrow-left" @click="moveTreeAll"></el-button>
 <el-button type="danger" plain icon="el-icon-arrow-left" @click="moveTree"></el-button>
 <el-button type="danger" plain @click="moveUp(index)">Move up</el-button>
 <el-button type="danger" plain @click="moveDown(index)">Move down</el-button>
</div>

<div class="rightTable">
 <table :data.sync="tableData" // Data returned by the table interface ref="personListSettingPage"
  :loading='vxeLoading'
  v-model="selectGroups" // Bind the array of selected items in the table on the right id="personListSettingPage"
  :showPagination= 'false'
  :height-full-screen = 'false'
  @sort-change="sortChange"
  @checkbox-change="selectChange" // Single-select event for the selected item on the right @checkbox-all="selectAll" // All-select event for the selected item on the right @data-refresh="getTableData()"> // Function to get the table data on the right <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
  <table-column field="text" show-overflow="title" title="Selected indicators" filterType='' >
  </table-column>
 </table>
 </div>

moveDownId:"", //Data stored when moving downmoveUpId:"", //Data stored in the table on the right when moving upselectGroups:[], //Used to store the selected data on the righttableData:[], //After the request comes back, all the data on the left will be stored in this arrayparentNodes:[], //All data of the tree on the lefttreeObj:"",

// Initialize ztree
 onCreated(treeObj){
 this.treeObj = treeObj
 let nodes = this.treeObj.getCheckedNodes(true); 
},
 //Checkbox event selectChange({ checked, records}) {
 this.selectGroups = records // Store the selected data in the array},
 //Checkbox all selected event selectAll({ checked, records }) {
 this.selectGroups = records
 },

moveUp(index){
 if(this.selectGroups.length>0){ // Check if there is a selected item on the right let goOrnot = true
 this.selectGroups.find((seItem)=>{ //Traverse the items selected in the tab on the right and find the corresponding id
  if(seItem.id==this.moveUpId.id){
  this.$message.warning(this.moveUpId.text+"There is no room to move up this line")
  goOrnot = false
  }
 })
 if(goOrnot){
  this.tableData.forEach((item,index)=>{ // Traverse all the data in the table on the right,
  this.$set(item,'rowIndex',index) //Due to the limitations of JavaScript, vue.js cannot monitor the addition and deletion of object properties, so you need to use $set or Object.assign(target, sources) so that the view will be updated.})
  let flag = true
  this.selectGroups.forEach((val,index2)=>{
  this.tableData.find((itm,ind)=>{
   if(val.id==itm.id){
   if(itm.rowIndex==0){ // Traverse the selected data on the right and compare it with all the data. If the id is the same, determine the value of the rowIndex attribute just added this.$message.warning(itm.text+"There is no room to move up this row")
    this.moveUpId = itm // Save the current data flag = false
    return
   }else{
    if(flag){ // Now you can move multiple data items let changeItem = JSON.parse(JSON.stringify(this.tableData[itm.rowIndex-1]))
    this.tableData.splice(itm.rowIndex-1,1);
    this.tableData.splice(itm.rowIndex,0,changeItem)
    }
   }
   }
  })
  })
 }
 }else{
 this.$message.warning('Please select the data to be moved')
 }
},

moveDown(index){
 if(this.selectGroups.length>0){
 let goOrnot = true
 this.selectGroups.find((seItem)=>{
  if(seItem.id==this.moveDownId.id){
  this.$message.warning(this.moveDownId.text+"There is no room to move down this line")
  goOrnot = false
  }else{
  this.moveFlag = true
  }
 })
 if(goOrnot){
  this.tableData.forEach((item,index)=>{
  this.$set(item,'rowIndex',index)
  })
  let selectData = JSON.parse(JSON.stringify(this.tableData))
  let a = [...this.selectGroups]
  a.reverse().forEach((val,index2)=>{
  selectData.find((itm,ind)=>{
   if(val.id==itm.id){
   if(itm.rowIndex==selectData.length-1){
    this.$message.warning(itm.text+"There is no room to move down this line")
    this.moveDownId = itm
    this.moveFlag = false
   }else{
    if(this.moveFlag){
    let changeItem = itm
    let delIndex=selectData.findIndex(i=>i.id == changeItem.id)
    this.tableData.splice(delIndex,1);
    this.tableData.splice(delIndex+1,0,changeItem)
    this.$refs.personListSettingPage.$refs.Table.setCheckboxRow(this.tableData[itm.rowIndex+1],true) // Add a ref=personListSettingPage to the table on the right
    }
   }
   }
  })
  })
 }
 }else{
 this.$message.warning('Please select the data to be moved')
 }
}

/* move into tree */
moveTree(){
 if(this.selectGroups.length>0){
 this.selectGroups.forEach(item=>{
  this.parentNodes.find(val=>{
  if(val.id == item.pid){
   /* Add a node */
   let node = this.treeObj.getNodeByParam("id", val.id, null);
   this.treeObj.addNodes(node,item)
   /* Cancel the selected state of the newly added node*/
   let cancelNode = this.treeObj.getNodeByParam("id", item.id, null);
   this.treeObj.checkNode(cancelNode,false,true);
  }
  })
  this.tableData.splice(this.tableData.findIndex(val => val.id === item.id), 1)
 })
 }else{
 this.$message.warning('Please select the data to be moved')
 }
},

/* Move into table */
moveTable(){
 let arr = []
 let nodes = this.treeObj.getCheckedNodes(true);
 if(nodes.length>0){
 nodes.forEach(item=>{
  this.tableData.find(val=>{
  arr.push(val.id)
  })
  if(arr.indexOf(item.id)>-1) return this.$message.error("Data is duplicated, please do not add it again")
  this.treeObj.removeNode(item)
  this.tableData.push(this.filterObj(item,["checked","codeSetId",'id','img','infoItemFlag','isMult','itemType','locked','mult','orgCode','pid','sort','syrs','text'])) // Call the following method to remove redundant fields})
 }else{
 this.$message.warning('Please check the data')
 }
},

/* Filter object redundant fields*/
filterObj(obj, arr) {
 const result = {}
 Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
 result[key] = obj[key]
 })
 return result
}