要素は、UI +はsortablejsのランクを達成するためにテーブルをドラッグ

< テンプレート> 
  < DIV クラス= "コンテナ" > 
    < EL-テーブル：データ= "たtableData" ボーダー行キー= "ID" > 
      < EL-テーブルカラム
         ALIGN = "センター" 
        V-ため= "（項目、インデックス）COLにおける」
        ：キー= "'COL _ $ {索引}`" 
        ：プロペラ= "dropCol [インデックス] .prop" 
        ：ラベル= "item.label" 
      > </ EL-テーブル列> 
    </ EL-テーブル> 
  </ DIV > 
</ テンプレート> 

< スクリプト>
以下からの輸入ソート可能「sortablejs 」。
輸出のデフォルト{ 
  データ（）{ 
    リターン{ 
      COL：[ 
        { 
          ラベル：" 日期" 、
          小道具：" 日付" 
        }、
        { 
          ラベル：" 姓名" 、
          小道具：" 名前" 
        }、
        { 
          ラベル：" 地址" 、
          小道具："
        } 
      ]、
      dropCol：[ 
        { 
          ラベル：" 日期" 、
          プロペラ：" 日付" 
        }、
        { 
          ラベル：" 姓名" 、
          小道具：" 名前" 
        }、
        { 
          ラベル：" 地址" 、
          プロペラ：" アドレス" 
        } 
      ]、
      たtableData ：[ 
        { 
          ID：1 、
          日：" 2016年5月2日" 、
          名称：" Xiaohu 1。" 、
          アドレス：" 沙普区道路、レーン100 " 
        }、
        { 
          ID：2 、
          DATE：" 2016年5月4日" 、
          名称：「Xiaohu 2 " 
          アドレス：" 沙普区道路、レーン200 " 
        }、
        { 
          ID：3 、
          DATE：" 2016年5月1日" 
          名："、 Xiaohu 3。" 、
          アドレス：" 沙普区道路、レーン300 " 
        }、
        { 
          ID：4 、
          DATE：" 2016年5月3日" 、
          名称："Xiaohu 4 " 、
          アドレス：「普レーン金沙江領域400 " 
        } 
      ] 
    ;} 
  }、
  コンポーネント：{ 
    
  }、
  マウント（）{ 
    //はデフォルトの動作の防止
    document.body.ondrop =  関数（イベント）{
      event.preventDefault（）; 
      するevent.stopPropagation（）; 
    }。
    この.rowDrop（）;
    この.columnDrop（）; 
  }、
  メソッド：{ 
    // 行拖拽
    rowDrop（）{ 
      CONST TBODY = document.querySelector（" .EL-table__body-ラッパーTBODY " ）。
      constの_this =  この; 
      Sortable.create（TBODY、{ 
        onEnd（{newIndexが、oldIndex}）{ 
          CONST currRow = _this.tableData.splice（oldIndex、1 ）[ 0 ]; 
          _this.tableData.splice（newIndexが、 0 、currRow）。 
        } 
      }）。
    } 
    // 列拖拽
    columnDrop（）{ 
      CONST wrapperTr = document.querySelector（" .EL-table__headerラッパーTR " ）。
      この.sortable = Sortable.create（wrapperTr、{ 
        アニメーション：180 、
        遅延：0 、
        フィルタ：" .cannotDrag " 、
        onEnd：EVT => { 
          CONST oldItem =  この.dropCol [evt.oldIndex];
           この .dropCol.splice（ evt.oldIndex、1 ）;
          この.dropCol.splice（evt.newIndex、0 、oldItem）。
        } 
      }）。
    } 
  } 
}。
</ スクリプト> 

< スタイルはLANGスコープ= "SCSS" > 

</ スタイル>

注：querySelectorAll対応決意処理に複数のセレクタを行うことができ、ページテーブルと