Commit 7e8e6ef898eb791acbef09d5d7e1a3b0ba9b02c3
1 parent
45f823c0
add dragdrop for tr
Showing
4 changed files
with
33 additions
and
4 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 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 | <Button @click="handleSetData">Set Data</Button> | 4 | <Button @click="handleSetData">Set Data</Button> |
| 5 | <Button @click="handleClearData">Clear Data</Button> | 5 | <Button @click="handleClearData">Clear Data</Button> |
| 6 | <Button @click="handleSelectAll(true)">Set all selected</Button> | 6 | <Button @click="handleSelectAll(true)">Set all selected</Button> |
| @@ -69,6 +69,9 @@ | @@ -69,6 +69,9 @@ | ||
| 69 | }, | 69 | }, |
| 70 | handleClearData () { | 70 | handleClearData () { |
| 71 | this.data1 = []; | 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
| @@ -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 | + :drag="drag" | ||
| 9 | :row="row" | 10 | :row="row" |
| 10 | :key="row._rowKey" | 11 | :key="row._rowKey" |
| 11 | :prefix-cls="prefixCls" | 12 | :prefix-cls="prefixCls" |
| @@ -58,7 +59,8 @@ | @@ -58,7 +59,8 @@ | ||
| 58 | fixed: { | 59 | fixed: { |
| 59 | type: [Boolean, String], | 60 | type: [Boolean, String], |
| 60 | default: false | 61 | default: false |
| 61 | - } | 62 | + }, |
| 63 | + drag:Boolean | ||
| 62 | }, | 64 | }, |
| 63 | computed: { | 65 | computed: { |
| 64 | expandRender () { | 66 | expandRender () { |
src/components/table/table-tr.vue
| 1 | <template> | 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 | </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 | + drag:Boolean | ||
| 9 | }, | 11 | }, |
| 10 | computed: { | 12 | computed: { |
| 11 | objData () { | 13 | objData () { |
| @@ -13,6 +15,18 @@ | @@ -13,6 +15,18 @@ | ||
| 13 | } | 15 | } |
| 14 | }, | 16 | }, |
| 15 | methods: { | 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 | rowClasses (_index) { | 30 | rowClasses (_index) { |
| 17 | return [ | 31 | return [ |
| 18 | `${this.prefixCls}-row`, | 32 | `${this.prefixCls}-row`, |
src/components/table/table.vue
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"> | 15 | v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))"> |
| 16 | <table-body | 16 | <table-body |
| 17 | ref="tbody" | 17 | ref="tbody" |
| 18 | + :drag="drag" | ||
| 18 | :prefix-cls="prefixCls" | 19 | :prefix-cls="prefixCls" |
| 19 | :styleObject="tableStyle" | 20 | :styleObject="tableStyle" |
| 20 | :columns="cloneColumns" | 21 | :columns="cloneColumns" |
| @@ -50,6 +51,7 @@ | @@ -50,6 +51,7 @@ | ||
| 50 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> | 51 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> |
| 51 | <table-body | 52 | <table-body |
| 52 | fixed="left" | 53 | fixed="left" |
| 54 | + :drag="drag" | ||
| 53 | :prefix-cls="prefixCls" | 55 | :prefix-cls="prefixCls" |
| 54 | :styleObject="fixedTableStyle" | 56 | :styleObject="fixedTableStyle" |
| 55 | :columns="leftFixedColumns" | 57 | :columns="leftFixedColumns" |
| @@ -72,6 +74,7 @@ | @@ -72,6 +74,7 @@ | ||
| 72 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"> | 74 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedRightBody"> |
| 73 | <table-body | 75 | <table-body |
| 74 | fixed="right" | 76 | fixed="right" |
| 77 | + :drag="drag" | ||
| 75 | :prefix-cls="prefixCls" | 78 | :prefix-cls="prefixCls" |
| 76 | :styleObject="fixedRightTableStyle" | 79 | :styleObject="fixedRightTableStyle" |
| 77 | :columns="rightFixedColumns" | 80 | :columns="rightFixedColumns" |
| @@ -168,6 +171,10 @@ | @@ -168,6 +171,10 @@ | ||
| 168 | loading: { | 171 | loading: { |
| 169 | type: Boolean, | 172 | type: Boolean, |
| 170 | default: false | 173 | default: false |
| 174 | + }, | ||
| 175 | + drag:{ | ||
| 176 | + type: Boolean, | ||
| 177 | + default: false | ||
| 171 | } | 178 | } |
| 172 | }, | 179 | }, |
| 173 | data () { | 180 | data () { |
| @@ -738,6 +745,9 @@ | @@ -738,6 +745,9 @@ | ||
| 738 | const data = Csv(columns, datas, params, noHeader); | 745 | const data = Csv(columns, datas, params, noHeader); |
| 739 | if (params.callback) params.callback(data); | 746 | if (params.callback) params.callback(data); |
| 740 | else ExportCsv.download(params.filename, data); | 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 | created () { | 753 | created () { |