|
| 1 | +<html> |
| 2 | +<head> |
| 3 | +<metacharset="utf-8"/> |
| 4 | +<metaname="viewport"content="width=device-width,initial-scale=1.0"/> |
| 5 | +<title>el-table表格拖拽</title> |
| 6 | +<link |
| 7 | +rel="stylesheet" |
| 8 | +href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" |
| 9 | +/> |
| 10 | +</head> |
| 11 | + |
| 12 | +<body> |
| 13 | +<scriptsrc="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> |
| 14 | +<scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script> |
| 15 | +<scriptsrc="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script> |
| 16 | +<divid="app"style="width:800px"> |
| 17 | +<div> |
| 18 | +<el-table:data="tableData"borderrow-key="id"align="left"> |
| 19 | +<el-table-column |
| 20 | +v-for="(item, index) in dropCol" |
| 21 | +:key="col[index].prop" |
| 22 | +:prop="dropCol[index].prop" |
| 23 | +:label="item.label" |
| 24 | +> |
| 25 | +<templateslot-scope="scope"> |
| 26 | +<span>{{ scope.row[dropCol[index].prop] }}</span> |
| 27 | +</template> |
| 28 | +</el-table-column> |
| 29 | +</el-table> |
| 30 | +<prestyle="text-align: left">{{dropCol}}</pre> |
| 31 | +<hr/> |
| 32 | +<prestyle="text-align: left">{{tableData}}</pre> |
| 33 | +</div> |
| 34 | +</div> |
| 35 | +</body> |
| 36 | +</html> |
| 37 | + |
| 38 | +<script> |
| 39 | +newVue({ |
| 40 | +el:'#app', |
| 41 | +data:{ |
| 42 | +col:[ |
| 43 | +{ |
| 44 | +label:'日期', |
| 45 | +prop:'date', |
| 46 | +}, |
| 47 | +{ |
| 48 | +label:'姓名', |
| 49 | +prop:'name', |
| 50 | +}, |
| 51 | +{ |
| 52 | +label:'地址', |
| 53 | +prop:'address', |
| 54 | +}, |
| 55 | +], |
| 56 | +dropCol:[ |
| 57 | +{ |
| 58 | +label:'日期', |
| 59 | +prop:'date', |
| 60 | +}, |
| 61 | +{ |
| 62 | +label:'姓名', |
| 63 | +prop:'name', |
| 64 | +}, |
| 65 | +{ |
| 66 | +label:'地址', |
| 67 | +prop:'address', |
| 68 | +}, |
| 69 | +], |
| 70 | +tableData:[ |
| 71 | +{ |
| 72 | +id:'1', |
| 73 | +date:'2016-05-02', |
| 74 | +name:'王小虎1', |
| 75 | +address:'上海市普陀区金沙江路 100 弄', |
| 76 | +}, |
| 77 | +{ |
| 78 | +id:'2', |
| 79 | +date:'2016-05-04', |
| 80 | +name:'王小虎2', |
| 81 | +address:'上海市普陀区金沙江路 200 弄', |
| 82 | +}, |
| 83 | +{ |
| 84 | +id:'3', |
| 85 | +date:'2016-05-01', |
| 86 | +name:'王小虎3', |
| 87 | +address:'上海市普陀区金沙江路 300 弄', |
| 88 | +}, |
| 89 | +{ |
| 90 | +id:'4', |
| 91 | +date:'2016-05-03', |
| 92 | +name:'王小虎4', |
| 93 | +address:'上海市普陀区金沙江路 400 弄', |
| 94 | +}, |
| 95 | +], |
| 96 | +}, |
| 97 | +mounted(){ |
| 98 | +this.rowDrop() |
| 99 | +this.columnDrop() |
| 100 | +}, |
| 101 | +methods:{ |
| 102 | +//行拖拽 |
| 103 | +rowDrop(){ |
| 104 | +consttbody=document.querySelector( |
| 105 | +'.el-table__body-wrapper tbody' |
| 106 | +) |
| 107 | +const_this=this |
| 108 | +Sortable.create(tbody,{ |
| 109 | +onEnd({ newIndex, oldIndex}){ |
| 110 | +constcurrRow=_this.tableData.splice(oldIndex,1)[0] |
| 111 | +_this.tableData.splice(newIndex,0,currRow) |
| 112 | +}, |
| 113 | +}) |
| 114 | +}, |
| 115 | +//列拖拽 |
| 116 | +columnDrop(){ |
| 117 | +constwrapperTr=document.querySelector( |
| 118 | +'.el-table__header-wrapper tr' |
| 119 | +) |
| 120 | +this.sortable=Sortable.create(wrapperTr,{ |
| 121 | +animation:180, |
| 122 | +delay:0, |
| 123 | +onEnd:evt=>{ |
| 124 | +constoldItem=this.dropCol[evt.oldIndex] |
| 125 | +this.dropCol.splice(evt.oldIndex,1) |
| 126 | +this.dropCol.splice(evt.newIndex,0,oldItem) |
| 127 | +}, |
| 128 | +}) |
| 129 | +}, |
| 130 | +}, |
| 131 | +}) |
| 132 | +</script> |