码迷,mamicode.com
首页 > 编程语言 > 详细

vue drag 对表格的列进行拖动排序

时间:2018-08-31 17:14:15      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:index   开始   item   NPU   tables   body   Owner   ring   返回   

用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 对表格的列进行拖动排序

标签:index   开始   item   NPU   tables   body   Owner   ring   返回   

原文地址:https://www.cnblogs.com/youngMe/p/9566294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!