Merge pull request #4729 from nodephp/2.0

add dragdrop for tr

examples/routers/table.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
+        <Table ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
         <Button @click="handleClearCurrentRow">Clear</Button>
     </div>
 </template>
@@ -62,6 +62,10 @@
         methods: {
             handleClearCurrentRow () {
                 this.$refs.currentRowTable.clearCurrentRow();
+            },
+            onDragDrop(a,b){
+                console.log(a,b);
+                this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
             }
         }
     }

src/components/table/table-body.vue

@@ -6,6 +6,7 @@
         <tbody :class="[prefixCls + '-tbody']">
             <template v-for="(row, index) in data">
                 <table-tr
+                    :draggable="draggable"
                     :row="row"
                     :key="row._rowKey"
                     :prefix-cls="prefixCls"
@@ -58,6 +59,10 @@
             fixed: {
                 type: [Boolean, String],
                 default: false
+            },
+            draggable: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {

src/components/table/table-tr.vue

@@ -1,11 +1,13 @@
 <template>
-    <tr :class="rowClasses(row._index)"><slot></slot></tr>
+    <tr :class="rowClasses(row._index)" :draggable="draggable" @dragstart="onDrag($event,row._index)" @drop="onDrop($event,row._index)" @dragover="allowDrop($event)" v-if="draggable"><slot></slot></tr>
+    <tr :class="rowClasses(row._index)" v-else><slot></slot></tr>
 </template>
 <script>
     export default {
         props: {
             row: Object,
-            prefixCls: String
+            prefixCls: String,
+            draggable: Boolean
         },
         computed: {
             objData () {
@@ -13,6 +15,17 @@
             }
         },
         methods: {
+             onDrag (e,index) {
+                e.dataTransfer.setData("index",index);
+            },
+            onDrop (e,index) {
+                const dragIndex = e.dataTransfer.getData("index");
+                this.$parent.$parent.dragAndDrop(dragIndex,index);
+                e.preventDefault();
+            },
+            allowDrop (e) {
+                e.preventDefault();
+            },
             rowClasses (_index) {
                 return [
                     `${this.prefixCls}-row`,
@@ -28,4 +41,4 @@
             },
         }
     };
-</script>
+</script>

src/components/table/table.vue

@@ -16,6 +16,7 @@
                 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table-body
                     ref="tbody"
+                    :draggable="draggable"
                     :prefix-cls="prefixCls"
                     :styleObject="tableStyle"
                     :columns="cloneColumns"
@@ -53,6 +54,7 @@
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
                     <table-body
                         fixed="left"
+                        :draggable="draggable"
                         :prefix-cls="prefixCls"
                         :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
@@ -77,6 +79,7 @@
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
                     <table-body
                         fixed="right"
+                        :draggable="draggable"
                         :prefix-cls="prefixCls"
                         :styleObject="fixedRightTableStyle"
                         :columns="rightFixedColumns"
@@ -183,6 +186,10 @@
             loading: {
                 type: Boolean,
                 default: false
+            },
+            draggable: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -909,6 +916,9 @@
                 const data = Csv(columns, datas, params, noHeader);
                 if (params.callback) params.callback(data);
                 else ExportCsv.download(params.filename, data);
+            },
+            dragAndDrop(a,b) {
+                this.$emit('on-drag-drop', a,b);
             }
         },
         created () {