other / mew-iview

Commit cd8302d5be7605562c41e0b14069ab09875f5621

Authored by Aresn
Committed by GitHub
2 parents bc0040d5 442c4208

Merge pull request #4729 from nodephp/2.0 

add dragdrop for tr
Showing 4 changed files with 36 additions and 4 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @cd8302d
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Table ref="currentRowTable" :columns="columns3" :data="data1"></Table> 3 + <Table ref="currentRowTable" :columns="columns3" :data="data1" :draggable="true" @on-drag-drop="onDragDrop"></Table>
4 <Button @click="handleClearCurrentRow">Clear</Button> 4 <Button @click="handleClearCurrentRow">Clear</Button>
5 </div> 5 </div>
6 </template> 6 </template>
@@ -62,6 +62,10 @@ @@ -62,6 +62,10 @@
62 methods: { 62 methods: {
63 handleClearCurrentRow () { 63 handleClearCurrentRow () {
64 this.$refs.currentRowTable.clearCurrentRow(); 64 this.$refs.currentRowTable.clearCurrentRow();
  65 + },
  66 + onDragDrop(a,b){
  67 + console.log(a,b);
  68 + this.data1.splice(b,1,...this.data1.splice(a, 1 , this.data1[b]));
65 } 69 }
66 } 70 }
67 } 71 }
src/components/table/table-body.vue
  Show/Hide comments   View file @cd8302d
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <template v-for="(row, index) in data"> 7 <template v-for="(row, index) in data">
8 <table-tr 8 <table-tr
  9 + :draggable="draggable"
9 :row="row" 10 :row="row"
10 :key="row._rowKey" 11 :key="row._rowKey"
11 :prefix-cls="prefixCls" 12 :prefix-cls="prefixCls"
@@ -58,6 +59,10 @@ @@ -58,6 +59,10 @@
58 fixed: { 59 fixed: {
59 type: [Boolean, String], 60 type: [Boolean, String],
60 default: false 61 default: false
  62 + },
  63 + draggable: {
  64 + type: Boolean,
  65 + default: false
61 } 66 }
62 }, 67 },
63 computed: { 68 computed: {
src/components/table/table-tr.vue
  Show/Hide comments   View file @cd8302d
1 <template> 1 <template>
2 - <tr :class="rowClasses(row._index)"><slot></slot></tr> 2 + <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>
  3 + <tr :class="rowClasses(row._index)" v-else><slot></slot></tr>
3 </template> 4 </template>
4 <script> 5 <script>
5 export default { 6 export default {
6 props: { 7 props: {
7 row: Object, 8 row: Object,
8 - prefixCls: String 9 + prefixCls: String,
  10 + draggable: Boolean
9 }, 11 },
10 computed: { 12 computed: {
11 objData () { 13 objData () {
@@ -13,6 +15,17 @@ @@ -13,6 +15,17 @@
13 } 15 }
14 }, 16 },
15 methods: { 17 methods: {
  18 + onDrag (e,index) {
  19 + e.dataTransfer.setData("index",index);
  20 + },
  21 + onDrop (e,index) {
  22 + const dragIndex = e.dataTransfer.getData("index");
  23 + this.$parent.$parent.dragAndDrop(dragIndex,index);
  24 + e.preventDefault();
  25 + },
  26 + allowDrop (e) {
  27 + e.preventDefault();
  28 + },
16 rowClasses (_index) { 29 rowClasses (_index) {
17 return [ 30 return [
18 `${this.prefixCls}-row`, 31 `${this.prefixCls}-row`,
@@ -28,4 +41,4 @@ @@ -28,4 +41,4 @@
28 }, 41 },
29 } 42 }
30 }; 43 };
31 -</script>  
32 \ No newline at end of file 44 \ No newline at end of file
  45 +</script>
src/components/table/table.vue
  Show/Hide comments   View file @cd8302d
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"> 16 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
17 <table-body 17 <table-body
18 ref="tbody" 18 ref="tbody"
  19 + :draggable="draggable"
19 :prefix-cls="prefixCls" 20 :prefix-cls="prefixCls"
20 :styleObject="tableStyle" 21 :styleObject="tableStyle"
21 :columns="cloneColumns" 22 :columns="cloneColumns"
@@ -53,6 +54,7 @@ @@ -53,6 +54,7 @@
53 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel"> 54 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
54 <table-body 55 <table-body
55 fixed="left" 56 fixed="left"
  57 + :draggable="draggable"
56 :prefix-cls="prefixCls" 58 :prefix-cls="prefixCls"
57 :styleObject="fixedTableStyle" 59 :styleObject="fixedTableStyle"
58 :columns="leftFixedColumns" 60 :columns="leftFixedColumns"
@@ -77,6 +79,7 @@ @@ -77,6 +79,7 @@
77 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel"> 79 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
78 <table-body 80 <table-body
79 fixed="right" 81 fixed="right"
  82 + :draggable="draggable"
80 :prefix-cls="prefixCls" 83 :prefix-cls="prefixCls"
81 :styleObject="fixedRightTableStyle" 84 :styleObject="fixedRightTableStyle"
82 :columns="rightFixedColumns" 85 :columns="rightFixedColumns"
@@ -183,6 +186,10 @@ @@ -183,6 +186,10 @@
183 loading: { 186 loading: {
184 type: Boolean, 187 type: Boolean,
185 default: false 188 default: false
  189 + },
  190 + draggable: {
  191 + type: Boolean,
  192 + default: false
186 } 193 }
187 }, 194 },
188 data () { 195 data () {
@@ -909,6 +916,9 @@ @@ -909,6 +916,9 @@
909 const data = Csv(columns, datas, params, noHeader); 916 const data = Csv(columns, datas, params, noHeader);
910 if (params.callback) params.callback(data); 917 if (params.callback) params.callback(data);
911 else ExportCsv.download(params.filename, data); 918 else ExportCsv.download(params.filename, data);
  919 + },
  920 + dragAndDrop(a,b) {
  921 + this.$emit('on-drag-drop', a,b);
912 } 922 }
913 }, 923 },
914 created () { 924 created () {