vue 要素 el-transfer にドラッグ機能を追加

コア資産管理プロジェクトでは、el-transfer にドラッグアンドドロップによる並べ替えと、左、右、上、下のドラッグアンドドロップ機能を追加する必要があります。
元のコンポーネントはドラッグをサポートしていないため、サードパーティのコンポーネントsortablejsを使用する必要があります。

最初のインストール

 sudo npm i sortablejs --save-dev

HTMLコード

  <テンプレート>
  <el-transfer ref="転送" id="転送" v-model="値" :data="データ">
   <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
  </el-transfer>
</テンプレート>```

作成する

  <スクリプト>

   'sortablejs' から Sortable をインポートします。

   エクスポートデフォルト{
      データ（） {
        const 生成データ = _ => {
          constデータ = []; for (let i = 1; i <= 15; i++) {
            データ.push({
              キー: i,
              ラベル: `オプション ${i}`,
              無効: i % 4 === 0 });
          } データを返します。
        }; 戻る {
          データ: generateData(),
          値: [1, 4],
          ドラッグキー: null }
      },
      マウント() {
        const 転送 = this.$refs.transfer.$el
        const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
        const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
        定数 rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
        ソート可能.create(rightEl,{
          onEnd: (イベント) => {
            const {古いインデックス、新しいインデックス} = evt;
            const temp = this.value[古いインデックス] 
            if (!temp || temp === 'undefined') {
              戻る
            }// 右端の最後の項目を右から左にドラッグしたときに undefined になる問題を解決します this.$set(this.value,oldIndex,this.value[newIndex])  
            this.$set(this.value,newIndex,temp)
          }
        })
        const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
        ソート可能.create(leftEl,{
          onEnd: (イベント) => {
            const {古いインデックス、新しいインデックス} = evt;
            const temp = this.data[古いインデックス] 
            if (!temp || temp === 'undefined') {
              戻る
            } // 右端の最後の項目を右から左にドラッグしたときに undefined になる問題を解決します this.$set(this.data,oldIndex,this.data[newIndex]) 
            this.$set(this.data,newIndex,temp)
          }
        })
        左パネル.ondragover = (ev) => {
          ev.preventDefault()
        }
        左パネル.ondrop = (ev) => {
          ev.preventDefault();
          const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1)
          }
        }
        rightPanel.ondragover = (ev) => {
          ev.preventDefault()
        }
        rightPanel.ondrop = (ev) => {
          ev.preventDefault(); if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey)
          }
        }
      },
      メソッド: {
        ドラッグ(ev,option) { this.draggingKey = option.key
        }
      }

    } 
</スクリプト>

これで、vue 要素 el-transfer にドラッグアンドドロップ機能を追加する方法についての記事は終了です。要素 el-transfer ドラッグアンドドロップに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: