chenhaodong / mew-iview

Commit 7e8e6ef898eb791acbef09d5d7e1a3b0ba9b02c3

Authored by forfire
1 parent 45f823c0

add dragdrop for tr

Showing 4 changed files with 33 additions and 4 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @7e8e6ef
1 1 <template>
2 2 <div>
3   - <Table border ref="selection" :columns="columns4" :data="data1"></Table>
  3 + <Table border ref="selection" :columns="columns4" :data="data1" @drag="true" @on-drag-drop="onDragDrop"></Table>
4 4 <Button @click="handleSetData">Set Data</Button>
5 5 <Button @click="handleClearData">Clear Data</Button>
6 6 <Button @click="handleSelectAll(true)">Set all selected</Button>
... ... @@ -69,6 +69,9 @@
69 69 },
70 70 handleClearData () {
71 71 this.data1 = [];
  72 + },
  73 + onDragDrop(a,b){
  74 + console.log(a,b)
72 75 }
73 76 }
74 77 }
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @7e8e6ef
... ... @@ -6,6 +6,7 @@
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <template v-for="(row, index) in data">
8 8 <table-tr
  9 + :drag="drag"
9 10 :row="row"
10 11 :key="row._rowKey"
11 12 :prefix-cls="prefixCls"
... ... @@ -58,7 +59,8 @@
58 59 fixed: {
59 60 type: [Boolean, String],
60 61 default: false
61   - }
  62 + },
  63 + drag:Boolean
62 64 },
63 65 computed: {
64 66 expandRender () {
... ...
src/components/table/table-tr.vue
  Show/Hide comments   View file @7e8e6ef
1 1 <template>
2   - <tr :class="rowClasses(row._index)"><slot></slot></tr>
  2 + <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>
  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 + drag:Boolean
9 11 },
10 12 computed: {
11 13 objData () {
... ... @@ -13,6 +15,18 @@
13 15 }
14 16 },
15 17 methods: {
  18 + onDrag(e,index){
  19 + e.dataTransfer.setData("index",index);
  20 + },
  21 + onDrop(e,index){
  22 + var dragIndex = e.dataTransfer.getData("index");
  23 + this.$parent.$parent.dragAndDrop(dragIndex,index);
  24 + e.preventDefault();
  25 + },
  26 + allowDrop(e)
  27 + {
  28 + e.preventDefault();
  29 + },
16 30 rowClasses (_index) {
17 31 return [
18 32 `${this.prefixCls}-row`,
... ...
src/components/table/table.vue
  Show/Hide comments   View file @7e8e6ef
... ... @@ -15,6 +15,7 @@
15 15 v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
16 16 <table-body
17 17 ref="tbody"
  18 + :drag="drag"
18 19 :prefix-cls="prefixCls"
19 20 :styleObject="tableStyle"
20 21 :columns="cloneColumns"
... ... @@ -50,6 +51,7 @@
50 51 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
51 52 <table-body
52 53 fixed="left"
  54 + :drag="drag"
53 55 :prefix-cls="prefixCls"
54 56 :styleObject="fixedTableStyle"
55 57 :columns="leftFixedColumns"
... ... @@ -72,6 +74,7 @@
72 74 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody">
73 75 <table-body
74 76 fixed="right"
  77 + :drag="drag"
75 78 :prefix-cls="prefixCls"
76 79 :styleObject="fixedRightTableStyle"
77 80 :columns="rightFixedColumns"
... ... @@ -168,6 +171,10 @@
168 171 loading: {
169 172 type: Boolean,
170 173 default: false
  174 + },
  175 + drag:{
  176 + type: Boolean,
  177 + default: false
171 178 }
172 179 },
173 180 data () {
... ... @@ -738,6 +745,9 @@
738 745 const data = Csv(columns, datas, params, noHeader);
739 746 if (params.callback) params.callback(data);
740 747 else ExportCsv.download(params.filename, data);
  748 + },
  749 + dragAndDrop(a,b) {
  750 + this.$emit('on-drag-drop', a,b);
741 751 }
742 752 },
743 753 created () {
... ...