chenhaodong / 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 1 <template>
2 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 4 <Button @click="handleClearCurrentRow">Clear</Button>
5 5 </div>
6 6 </template>
... ... @@ -62,6 +62,10 @@
62 62 methods: {
63 63 handleClearCurrentRow () {
64 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 <tbody :class="[prefixCls + '-tbody']">
7 7 <template v-for="(row, index) in data">
8 8 <table-tr
  9 + :draggable="draggable"
9 10 :row="row"
10 11 :key="row._rowKey"
11 12 :prefix-cls="prefixCls"
... ... @@ -58,6 +59,10 @@
58 59 fixed: {
59 60 type: [Boolean, String],
60 61 default: false
  62 + },
  63 + draggable: {
  64 + type: Boolean,
  65 + default: false
61 66 }
62 67 },
63 68 computed: {
... ...
src/components/table/table-tr.vue
  Show/Hide comments   View file @cd8302d
1 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 4 </template>
4 5 <script>
5 6 export default {
6 7 props: {
7 8 row: Object,
8   - prefixCls: String
  9 + prefixCls: String,
  10 + draggable: Boolean
9 11 },
10 12 computed: {
11 13 objData () {
... ... @@ -13,6 +15,17 @@
13 15 }
14 16 },
15 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 29 rowClasses (_index) {
17 30 return [
18 31 `${this.prefixCls}-row`,
... ... @@ -28,4 +41,4 @@
28 41 },
29 42 }
30 43 };
31   -</script>
32 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 16 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
17 17 <table-body
18 18 ref="tbody"
  19 + :draggable="draggable"
19 20 :prefix-cls="prefixCls"
20 21 :styleObject="tableStyle"
21 22 :columns="cloneColumns"
... ... @@ -53,6 +54,7 @@
53 54 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
54 55 <table-body
55 56 fixed="left"
  57 + :draggable="draggable"
56 58 :prefix-cls="prefixCls"
57 59 :styleObject="fixedTableStyle"
58 60 :columns="leftFixedColumns"
... ... @@ -77,6 +79,7 @@
77 79 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody" @mousewheel="handleFixedMousewheel" @DOMMouseScroll="handleFixedMousewheel">
78 80 <table-body
79 81 fixed="right"
  82 + :draggable="draggable"
80 83 :prefix-cls="prefixCls"
81 84 :styleObject="fixedRightTableStyle"
82 85 :columns="rightFixedColumns"
... ... @@ -183,6 +186,10 @@
183 186 loading: {
184 187 type: Boolean,
185 188 default: false
  189 + },
  190 + draggable: {
  191 + type: Boolean,
  192 + default: false
186 193 }
187 194 },
188 195 data () {
... ... @@ -909,6 +916,9 @@
909 916 const data = Csv(columns, datas, params, noHeader);
910 917 if (params.callback) params.callback(data);
911 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 924 created () {
... ...