表格拖拽

<template>
 <div>
  <el-table :data="addReportForm.tableData" border style="width: 100%; margin-top: 8px" max-height="210" row-key="id"  class="draggable-table">
    <el-table-column type="index" :label="$t('general.No.')" width="70" align="center" />
    <el-table-column prop="title" :label="$t('report.chartName')" header-align="center" />
  </el-table>
 </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, nextTick } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import Sortable from 'sortablejs';

const $t = $.t;
// 左侧新增节点表单
const addReportForm = reactive({
  title: '',
  tableData: [],
});

onMounted(() => {
  nextTick(() => {
    drag();
  });
});
function drag() {
  const tbody: HTMLElement = document.querySelector('.draggable-table .el-table__body-wrapper tbody');
  new Sortable(tbody, {
    animation: 150,
    onEnd: ({ newIndex, oldIndex }) => {
      const targetRow = addReportForm.tableData[oldIndex];
      addReportForm.tableData.splice(oldIndex, 1);
      addReportForm.tableData.splice(newIndex, 0, targetRow);
    },
  });
};
</script>

<style lang="scss" scoped>
.draggable-table {
  cursor: pointer;
}
:deep(.el-dialog__body.el-dialog__body) {
  padding: 30px !important;
}
</style>