要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグアンドドロップによる並べ替え機能が組み込まれておらず、サードパーティのプラグインである Sortablejs の助けを借りてのみ実装できます。まずは動的な画像を見て、効果が期待どおりかどうかを確認しましょう。

まずSortable.jsをインストールする必要があります

npm をインストール sortablejs --save

引用する

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

要素テーブルでは、ID などの一意の行キーを指定する必要があることに注意してください。そうしないと、誤った並べ替えが発生します。

###サンプルコード

<テンプレート>
  <div スタイル="width:800px">

    <el-table :data="テーブルデータ"
      国境
      行キー="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[インデックス].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{ドロップコル}}
    </pre>
    <時間>
    <pre style="text-align: left">
      {{テーブルデータ}}
    </pre>
  </div>
</テンプレート>
<スクリプト>
'sortablejs' から Sortable をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      列: [
        {
          ラベル: '日付'、
          プロパティ: '日付'
        },
        {
          ラベル: '名前',
          プロパティ: '名前'
        },
        {
          ラベル: '住所'、
          プロパティ: 'アドレス'
        }
      ]、
      ドロップコル: [
        {
          ラベル: '日付'、
          プロパティ: '日付'
        },
        {
          ラベル: '名前',
          プロパティ: '名前'
        },
        {
          ラベル: '住所'、
          プロパティ: 'アドレス'
        }
      ]、
      テーブルデータ: [
        {
          id: '1',
          日付: '2016-05-02'、
          名前: '王小虎1',
          住所: 上海市普陀区金沙江路100号
        },
        {
          id: '2',
          日付: '2016-05-04'、
          名前: '王小虎2',
          住所: 上海市普陀区金沙江路200号
        },
        {
          id: '3',
          日付: '2016-05-01'、
          名前: '王小虎3',
          住所: 上海市普陀区金沙江路300号
        },
        {
          id: '4',
          日付: '2016-05-03'、
          名前: '王小虎4',
          住所: 上海市普陀区金沙江路400号
        }
      ]
    }
  },
  マウント() {
    this.rowDrop()
    this.columnDrop()
  },
  メソッド: {
    //行ドラッグ rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = これ
      ソート可能.create(tbody, {
        onEnd({ 新しいインデックス、 古いインデックス }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(新しいインデックス、0、currRow)
        }
      })
    },
    //列ドラッグcolumnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        アニメーション: 180,
        遅延: 0,
        onEnd: イベント => {
          定数 oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</スクリプト>
<スタイルスコープ>
</スタイル>

これで、要素テーブルで行と列をドラッグする実装例に関するこの記事は終了です。要素テーブルで行と列をドラッグする関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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