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

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

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

<テンプレート>
  <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)
        }
      })
    }
  }
}
</スクリプト>
<スタイルスコープ>
</スタイル>