Vueシャトルボックスは上下の動きを実現します

// setLeftAgency: カプセル化されたリクエストインターフェース名 setLeftAgency(params).then((res) => { // 返されたコードが 0 の場合、成功を意味します if (res.data.code == 0) {
 データ = res.data とします。
 data.forEach((item) => { //返されたデータを走査します。このパラメータがItemの場合、チェックボックスが表示されないように現在のデータにnocheck=trueを追加します。
 if(item.Type!=='アイテム'){
  アイテム.nocheck=true
 }
 // item.children を削除します。
 });
 this.parentNodes = data; // 変更されたデータを配列に入れて再度レンダリングします}

<div class="leftTree"> // ここでの onCreated バインドは左ツリーの初期化関数であり、parentNodes は左ツリーのすべてのデータを格納します<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)">上に移動</el-button>
 <el-button type="danger" plain @click="moveDown(index)">下へ移動</el-button>
</div>

<div class="rightTable">
 <table :data.sync="tableData" // テーブル インターフェースによって返されるデータ ref="personListSettingPage"
  :loading='vxeLoading'
  v-model="selectGroups" // 右側のテーブルで選択された項目の配列をバインドします id="personListSettingPage"
  :showPagination= 'false'
  :height-full-screen = 'false'
  @sort-change="sortChange"
  @checkbox-change="selectChange" // 右側の選択項目の単一選択イベント @checkbox-all="selectAll" // 右側の選択項目の全選択イベント @data-refresh="getTableData()"> // 右側のテーブルデータを取得する関数 <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
  <table-column field="text" show-overflow="title" title="選択された指標" filterType='' >
  </テーブル列>
 </テーブル>
 </div>

moveDownId:"", // 下に移動するときに保存されるデータmoveUpId:"", // 上に移動するときに右側のテーブルに保存されるデータselectGroups:[], // 右側の選択されたデータを保存するために使用されますtableData:[], // リクエストが返された後、左側のすべてのデータがこの配列に保存されますparentNodes:[], // 左側のツリーのすべてのデータtreeObj:"",

// ztree を初期化する
 ツリーオブジェクトの作成時
 this.treeObj = ツリーObj
 ノードを this.treeObj.getCheckedNodes(true); とします。 
},
 //チェックボックスイベント selectChange({checked, records}) {
 this.selectGroups = records // 選択したデータを配列に保存します},
 //チェックボックスすべて選択イベント selectAll({checked, records}) {
 this.selectGroups = レコード
 },

上へ移動(インデックス){
 if(this.selectGroups.length>0){ // 右側に選択された項目があるかどうかを確認します。goOrnot = true
 this.selectGroups.find((seItem)=>{ //右側のタブで選択された項目を走査し、対応する ID を見つけます
  if(seItem.id==this.moveUpId.id){
  this.$message.warning(this.moveUpId.t​​ext+"この行を上に移動する余地がありません")
  goOrnot = 偽
  }
 })
 if(行くか行かないか){
  this.tableData.forEach((item,index)=>{ // 右側のテーブル内のすべてのデータを走査し、
  this.$set(item,'rowIndex',index) //JavaScript の制限により、vue.js はオブジェクト プロパティの追加と削除を監視できないため、ビューが更新されるように $set または Object.assign(target, source) を使用する必要があります。})
  フラグを true にする
  this.selectGroups.forEach((val,index2)=>{
  this.tableData.find((itm,ind)=>{
   if(val.id==itm.id){
   if(itm.rowIndex==0){ // 右側の選択されたデータを走査し、すべてのデータと比較します。ID が同じ場合は、追加した rowIndex 属性の値を決定します。$message.warning(itm.text+"この行を上に移動する余地はありません")
    this.moveUpId = itm // 現在のデータを保存する flag = false
    戻る
   }それ以外{
    if(flag){ // 複数のデータ項目を移動できるようになりました 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)
    }
   }
   }
  })
  })
 }
 }それ以外{
 this.$message.warning('移動するデータを選択してください')
 }
},

下へ移動(インデックス){
 if(this.selectGroups.length>0){
 手放すOrnot = true
 this.selectGroups.find((seItem)=>{
  if(seItem.id==this.moveDownId.id){
  this.$message.warning(this.moveDownId.text+"この行を下に移動できる余地はありません")
  goOrnot = 偽
  }それ以外{
  this.moveFlag = true
  }
 })
 if(行くか行かないか){
  this.tableData.forEach((item,index)=>{
  this.$set(item,'rowIndex',index)
  })
  selectData = JSON.parse(JSON.stringify(this.tableData)) とします。
  a = [...this.selectGroups] とします
  a.reverse().forEach((val,index2)=>{
  selectData.find((itm,ind)=>{
   if(val.id==itm.id){
   itm.rowIndex==selectData.length-1の場合{
    this.$message.warning(itm.text+"この行を下に移動できる余地はありません")
    this.moveDownId = itm
    this.moveFlag = false
   }それ以外{
    if(this.moveFlag){
    changeItem = itm とします
    delIndex=selectData.findIndex(i=>i.id == changeItem.id) とします。
    this.tableData.splice(delIndex,1);
    this.tableData.splice(インデックス削除+1,0,項目変更)
    this.$refs.personListSettingPage.$refs.Table.setCheckboxRow(this.tableData[itm.rowIndex+1],true) // 右側のテーブルに ref=personListSettingPage を追加します
    }
   }
   }
  })
  })
 }
 }それ以外{
 this.$message.warning('移動するデータを選択してください')
 }
}

/* ツリーに移動する */
ツリーを移動します（）{
 if(this.selectGroups.length>0){
 this.selectGroups.forEach(item=>{
  this.parentNodes.find(val=>{
  if(val.id == item.pid){
   /* ノードを追加 */
   ノードを this.treeObj.getNodeByParam("id", val.id, null); にします。
   this.treeObj.addNodes(ノード、アイテム)
   /* 新しく追加されたノードの選択状態を解除します*/
   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)
 })
 }それ以外{
 this.$message.warning('移動するデータを選択してください')
 }
},

/* テーブルに移動 */
テーブルを移動します（）{
 arr = [] とします
 ノードを this.treeObj.getCheckedNodes(true); とします。
 ノードの長さが0以上の場合
 ノード.forEach(item=>{
  this.tableData.find(val=>{
  arr.push(val.id)
  })
  if(arr.indexOf(item.id)>-1) return this.$message.error("データが重複しています。再度追加しないでください")
  this.treeObj.removeNode(アイテム)
  this.tableData.push(this.filterObj(item,["checked","codeSetId",'id','img','infoItemFlag','isMult','itemType','locked','mult','orgCode','pid','sort','syrs','text'])) // 冗長なフィールドを削除するには、次のメソッドを呼び出します})
 }それ以外{
 this.$message.warning('データを確認してください')
 }
},

/* オブジェクトの冗長フィールドをフィルターする*/
フィルターオブジェクト(obj, arr) {
 定数結果 = {}
 Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
 結果[キー] = オブジェクト[キー]
 })
 結果を返す
}