|
@@ -1,12 +1,12 @@
|
|
<template>
|
|
<template>
|
|
- <table class="table table-tiny drag-table">
|
|
|
|
|
|
+ <table class="table drag-table">
|
|
<colgroup>
|
|
<colgroup>
|
|
- <col width="20" />
|
|
|
|
|
|
+ <col v-if="dragEnable" width="20" />
|
|
<col v-for="column in columns" :key="column.prop" :width="column.width" />
|
|
<col v-for="column in columns" :key="column.prop" :width="column.width" />
|
|
</colgroup>
|
|
</colgroup>
|
|
<thead>
|
|
<thead>
|
|
<tr>
|
|
<tr>
|
|
- <th></th>
|
|
|
|
|
|
+ <th v-if="dragEnable"></th>
|
|
<th v-for="column in columns" :key="column.prop">
|
|
<th v-for="column in columns" :key="column.prop">
|
|
{{ column.label }}
|
|
{{ column.label }}
|
|
</th>
|
|
</th>
|
|
@@ -34,13 +34,18 @@
|
|
@dragend.prevent="dragEnd"
|
|
@dragend.prevent="dragEnd"
|
|
>
|
|
>
|
|
<td
|
|
<td
|
|
|
|
+ v-if="dragEnable"
|
|
class="drag-handle"
|
|
class="drag-handle"
|
|
@mousedown.stop="dragHandleMousedown"
|
|
@mousedown.stop="dragHandleMousedown"
|
|
@mouseup.stop="dragHandleMouseup"
|
|
@mouseup.stop="dragHandleMouseup"
|
|
>
|
|
>
|
|
<i class="el-icon-more"></i>
|
|
<i class="el-icon-more"></i>
|
|
</td>
|
|
</td>
|
|
- <td v-for="column in columns" :key="column.prop">
|
|
|
|
|
|
+ <td
|
|
|
|
+ v-for="column in columns"
|
|
|
|
+ :key="column.prop"
|
|
|
|
+ :class="column.className"
|
|
|
|
+ >
|
|
<slot :name="column.prop" v-bind:row="row">
|
|
<slot :name="column.prop" v-bind:row="row">
|
|
{{ row[column.prop] }}
|
|
{{ row[column.prop] }}
|
|
</slot>
|
|
</slot>
|
|
@@ -73,6 +78,10 @@ export default {
|
|
type: String,
|
|
type: String,
|
|
default: "sortNum",
|
|
default: "sortNum",
|
|
},
|
|
},
|
|
|
|
+ dragEnable: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true,
|
|
|
|
+ },
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -116,10 +125,13 @@ export default {
|
|
return this.tableData[pos + offset] || null;
|
|
return this.tableData[pos + offset] || null;
|
|
},
|
|
},
|
|
dragStart(e, row) {
|
|
dragStart(e, row) {
|
|
|
|
+ if (!this.dragEnable) return;
|
|
this.dragStartPageY = e.pageY;
|
|
this.dragStartPageY = e.pageY;
|
|
this.curDragRow = row;
|
|
this.curDragRow = row;
|
|
},
|
|
},
|
|
dragOver(e) {
|
|
dragOver(e) {
|
|
|
|
+ if (!this.dragEnable) return;
|
|
|
|
+
|
|
// console.log(e.target);
|
|
// console.log(e.target);
|
|
this.isDragDown = e.pageY > this.dragStartPageY;
|
|
this.isDragDown = e.pageY > this.dragStartPageY;
|
|
if (e.target.className.includes("drag-table-tbody")) {
|
|
if (e.target.className.includes("drag-table-tbody")) {
|
|
@@ -136,6 +148,7 @@ export default {
|
|
this.curDropRow = this.getSiblingRow(targetKey, 0);
|
|
this.curDropRow = this.getSiblingRow(targetKey, 0);
|
|
},
|
|
},
|
|
dragEnd(e) {
|
|
dragEnd(e) {
|
|
|
|
+ if (!this.dragEnable) return;
|
|
if (this.curDragRow.id === this.curDropRow.id || !this.curDropRow) return;
|
|
if (this.curDragRow.id === this.curDropRow.id || !this.curDropRow) return;
|
|
// 往下:target上一个位置
|
|
// 往下:target上一个位置
|
|
// 往上:target下一个位置
|
|
// 往上:target下一个位置
|