add dragdrop for tr

forfire
1 parent 45f823c0
Showing 4 changed files with 33 additions and 4 deletions Show diff stats
examples/routers/table.vue
src/components/table/table-body.vue
src/components/table/table-tr.vue
src/components/table/table.vue
 <template>
     <div>
-        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
+        <Table border ref="selection" :columns="columns4" :data="data1" @drag="true" @on-drag-drop="onDragDrop"></Table>
         <Button @click="handleSetData">Set Data</Button>
         <Button @click="handleClearData">Clear Data</Button>
         <Button @click="handleSelectAll(true)">Set all selected</Button>
@@ -69,6 +69,9 @@
             },
             handleClearData () {
                 this.data1 = [];
+            },
+            onDragDrop(a,b){
+                console.log(a,b)
             }
         }
     }
@@ -6,6 +6,7 @@
         <tbody :class="[prefixCls + '-tbody']">
             <template v-for="(row, index) in data">
                 <table-tr
+                    :drag="drag"
                     :row="row"
                     :key="row._rowKey"
                     :prefix-cls="prefixCls"
@@ -58,7 +59,8 @@
             fixed: {
                 type: [Boolean, String],
                 default: false
-            }
+            },
+            drag:Boolean
         },
         computed: {
             expandRender () {
 <template>
-    <tr :class="rowClasses(row._index)"><slot></slot></tr>
+    <tr :class="rowClasses(row._index)" :draggable="drag" v-on:dragstart="onDrag($event,row._index)" v-on:drop="onDrop($event,row._index)" v-on:dragover="allowDrop($event)" v-if="drag" ><slot></slot></tr>
+    <tr :class="rowClasses(row._index)" v-else ><slot></slot></tr>
 </template>
 <script>
     export default {
         props: {
             row: Object,
-            prefixCls: String
+            prefixCls: String,
+            drag:Boolean
         },
         computed: {
             objData () {
@@ -13,6 +15,18 @@
             }
         },
         methods: {
+             onDrag(e,index){
+                e.dataTransfer.setData("index",index);
+            },
+            onDrop(e,index){
+                var dragIndex = e.dataTransfer.getData("index");
+                this.$parent.$parent.dragAndDrop(dragIndex,index);
+                e.preventDefault();
+            },
+            allowDrop(e)
+            {
+                e.preventDefault();
+            },
             rowClasses (_index) {
                 return [
                     `${this.prefixCls}-row`,
@@ -15,6 +15,7 @@
                 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table-body
                     ref="tbody"
+                    :drag="drag"
                     :prefix-cls="prefixCls"
                     :styleObject="tableStyle"
                     :columns="cloneColumns"
@@ -50,6 +51,7 @@
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
                     <table-body
                         fixed="left"
+                        :drag="drag"
                         :prefix-cls="prefixCls"
                         :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
@@ -72,6 +74,7 @@
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
                     <table-body
                         fixed="right"
+                        :drag="drag"
                         :prefix-cls="prefixCls"
                         :styleObject="fixedRightTableStyle"
                         :columns="rightFixedColumns"
@@ -168,6 +171,10 @@
             loading: {
                 type: Boolean,
                 default: false
+            },
+            drag:{
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -738,6 +745,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 () {