1 <template>
2 <div>
3 <el-table :data="addReportForm.tableData" border style="width: 100%; margin-top: 8px" max-height="210" row-key="id" class="draggable-table">
4 <el-table-column type="index" :label="$t('general.No.')" width="70" align="center" />
5 <el-table-column prop="title" :label="$t('report.chartName')" header-align="center" />
6 </el-table>
7 </div>
8 </template>
9
10 <script setup lang="ts">
11 import { reactive, onMounted, nextTick } from 'vue';
12 import { ElTable, ElTableColumn } from 'element-plus';
13 import Sortable from 'sortablejs';
14
15 const $t = $.t;
16 // 左侧新增节点表单
17 const addReportForm = reactive({
18 title: '',
19 tableData: [],
20 });
21
22 onMounted(() => {
23 nextTick(() => {
24 drag();
25 });
26 });
27 function drag() {
28 const tbody: HTMLElement = document.querySelector('.draggable-table .el-table__body-wrapper tbody');
29 new Sortable(tbody, {
30 animation: 150,
31 onEnd: ({ newIndex, oldIndex }) => {
32 const targetRow = addReportForm.tableData[oldIndex];
33 addReportForm.tableData.splice(oldIndex, 1);
34 addReportForm.tableData.splice(newIndex, 0, targetRow);
35 },
36 });
37 };
38 </script>
39
40 <style lang="scss" scoped>
41 .draggable-table {
42 cursor: pointer;
43 }
44 :deep(.el-dialog__body.el-dialog__body) {
45 padding: 30px !important;
46 }
47 </style>
标签：__,el,const,表格,addReportForm,tableData,import,拖拽 From： https://www.cnblogs.com/guwufeiyang/p/17023940.html