Vue shuttle box realizes up and down movement

This article example shares the specific code for the vue shuttle box to move up and down for your reference. The specific content is as follows

Use elementUI's tree component

Functional requirements:

1. Move the child node on the left to the table on the right
2. Move the selected content on the right to the tree on the left, single move and all move
3. Click the node on the right to move up and down

The first problem you may encounter is how to make only the child nodes on the left display the checkbox. I use a parameter returned by the backend to determine whether it is a parent node (in fact, as long as the backend adds nocheck=true to the parent node, it will be fine)

// 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}

The tree structure on the left, the button in the middle and the table on the right (the tree structure and table on the left are encapsulated and imported directly)

<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>

Parameters used

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:"",

Initialization of the left tree and selection of the right table checkbox

// 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
 },

Move Up

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')
 }
},

Move Down

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 table to tree

/* 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 tree to table

/* 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')
 }
},

Encapsulated filter fields

/* 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
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: