literal val html class 狀態 epc 索引 一次 data

用drag實現拖動表格列進行列排序 以下是用到的主要方法 1.dragstart 拖動開始返回目標對象
2.dragenter 拖動過程中經過的對象 3.dragend 拖動結束返回目標對象 部分代碼***************************************************************** html <table class="el-table el-table--border el-table--small" style="margin-top:20px;"> <thead class="el-table__header-wrapper has-gutter"> <tr> <th v-for="(columns, index) in tablesColumns" draggable=‘true‘ @dragstart="dragstartEvent(index)" @dragenter="dragenterEvent($event,columns)" @dragend="dragendEvent($event,columns)"> <label class="cell" v-html="renderHeader(index, columns)"> </label> </th> </tr> </thead> <tbody class="el-table__body"> <tr v-for="(item, index) in tables"> <td v-for="columns in tablesColumns">{{item[columns.key]}}</td> </tr> </tbody> </table> js

data tables:[{ bill_type:1 bill_type_name:"普通入庫" id:30 owner_id:1 owner_name:"許旺" receipt_sn:"2018060282" status:4 status_name:"完驗" }], tablesColumns: [{ column:"單據類型" key:"bill_type_name" type:"checkbox" },{ column:"入庫單號" key:"receipt_sn" type:"input" },{ column:"單據狀態"

key:"status_name" type:"radio" }], dragEndColumn: {},//目標對象最後放置的位置 dragStartIndex: ""//目標對象原索引 //表頭 renderHeader(index, column) { if (‘renderHeader‘ in this.tablesColumns[index]) { return this.tablesColumns[index].renderHeader(column, index); } else { return column.column || ‘‘; } }, //拖動開始 ---記錄目標對象的索引，以判斷是向前拖動還是向後拖動 dragstartEvent(index) { this.dragStartIndex = index }, //拖動過程---每移動一個對象都會進這個方法，只有最後一次進這個方法的是拖動結束放置的位置 dragenterEvent(ev, col) { this.dragEndColumn = col }, //拖動結束 ---刪除原數組中的目標對象，並在放置位置加上目標對象 dragendEvent(ev, col) { if (col.key != this.dragEndColumn.key) { this.tablesColumns.forEach((item, index) => { if (item.key == col.key) { this.tablesColumns.splice(index, 1) } }) this.tablesColumns.forEach((el, index) => { if (el.key == this.dragEndColumn.key) { // var data = deepCopy(this.columns[this.dragStartIndex]) var indexCol = "" if (this.dragStartIndex < index) { indexCol = index + 1 } else { indexCol = index } this.tablesColumns.splice(indexCol, 0, col) this.dragEndColumn = {} this.dragStartIndex = "" return } }) } }

vue drag 對表格的列進行拖動排序