表格?

        <div class="main_table"><el-table id="elTableid" :data="fieldArr" border style="width: 100%" row-class-name="drag-row"current-row-key highlight-current-row><el-table-column type="index" label="序號" width="60" align="left"></el-table-column><el-table-column prop="infoName" label="顯示名" align="left" show-overflow-tooltip></el-table-column><el-table-column prop="infoVal" label="顯示內容" align="left" show-overflow-tooltip></el-table-column></el-table></div>

第一種：利用Sortable.js

1、index.html文件

<script type="text/javaScript" src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

methods: {        startSortable() {// 復制表格元素一份let fieldArrSort = []let that = this// 調用Sortable.create方法創建排序實例，傳入表格元素和配置項const el = document.querySelector('#elTableid .el-table__body-wrapper table tbody')Sortable.create(el, {animation: 150,fallbackOnBody: true,ghostClass: '.blue-background-class',// 當用戶選擇一個元素準備拖動時觸發（鼠標按下或觸摸開始）。onChoose: function (evt) {this.fieldsBase = falsefieldArrSort = []// 將fieldArr的值復制給fieldArrSortfieldArrSort = JSON.parse(JSON.stringify(that.fieldArr))},//開始拖拽onStart: function (evt) {const item = evt.item; // 被拖動的元素item.style.backgroundColor = '#CBECFB'; // 設置背景色},// 當排序過程中元素位置發生變化時觸發開始拖拽onSort: function (evt) {},//結束拖拽onEnd: function (evt) {let newIndex = evt.newIndex  // 排序后的索引位置let oldIndex = evt.oldIndex  // 排序前的索引位置let moveData = fieldArrSort[oldIndex]fieldArrSort.splice(oldIndex, 1)fieldArrSort.splice(newIndex, 0, moveData)const item = evt.item; // 被拖動的元素item.style.backgroundColor = ''; // 設置背景色     // fieldArr真的需要清除（重點）that.fieldArr = []that.$nextTick(() => {that.fieldArr = fieldArrSort});},})},
},mounted() {// 使用 this.$nextTick 獲取表格行的 DOM 元素this.$nextTick(() => {this.startSortable();});},

?

第二種：利用Dom的 draggable事件

methods: {
// 添加拖拽事件addDragEvents() {// 獲取所有帶有類名 'drag-row' 的表格行this.rows = document.querySelectorAll('.drag-row');// 遍歷每一行，添加拖拽事件this.rows.forEach((row, index) => {row.draggable = true; // 設置行元素為可拖拽// 開始拖拽時的事件處理row.ondragstart = (event) => this.handleDragStart(event, index);// 拖拽經過時的事件處理row.ondragover = (event) => this.handleDragOver(event);// 拖拽放下時的事件處理row.ondrop = (event) => this.handleDrop(event, index);});},// 處理拖拽開始事件handleDragStart(event, index) {this.draggingIndex = index; // 記錄當前拖拽行的索引//   event.dataTransfer.effectAllowed = 'move'; // 設置拖拽效果為移動//   event.dataTransfer.setData('text/plain', index); // 將索引存儲到拖拽數據中},// 處理拖拽經過事件handleDragOver(event) {//   event.preventDefault(); // 阻止默認事件，允許放置//   event.dataTransfer.dropEffect = 'move'; // 設置拖拽效果為移動//   this.rows[this.draggingIndex].style.backgroundColor = '#CBECFB'; // 重置拖拽行的背景色},// 處理拖拽放下事件handleDrop(event, targetIndex) {// this.rows[this.draggingIndex].style.backgroundColor = ''; // 重置拖拽行的背景色const sourceIndex = this.draggingIndex; // 獲取開始拖拽時記錄的索引// 如果源索引和目標索引相同，直接返回if (sourceIndex === targetIndex) return;// 創建項目列表的副本const fieldArr = [...this.fieldArr];// 刪除源位置的項目，并存儲被拖拽的項目const [movedItem] = fieldArr.splice(sourceIndex, 1);// 在目標位置插入被拖拽的項目fieldArr.splice(targetIndex, 0, movedItem);// 更新項目列表數據this.fieldArr = fieldArrthis.draggingIndex = null; // 重置拖拽索引},},mounted() {// 使用 this.$nextTick 獲取表格行的 DOM 元素this.$nextTick(() => {this.addDragEvents();});},updated() {// 數據更新后重新添加拖拽事件this.$nextTick(() => {this.addDragEvents();});},