<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < title> </ title> < linkrel = " stylesheet" href = " https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> < style> .container { padding : 0 30px; background : #f1eded; height : 500px; padding-top : 30px; } .filtered { background-color : #f9f9f9; } </ style> </ head> < body> < divid = " app" class = " container" > < h1> </ h1> < el-tableclass = " drag-table" :data = " schedule" border :cell-class-name = " getCellClassName" > < el-table-columnv-for = " item in x" :key = " item.value" :prop = " item.value" :label = " item.label" > </ el-table-column> </ el-table> </ div> < scriptsrc = " https://cdn.jsdelivr.net/npm/vue@2" > </ script> < scriptsrc = " https://unpkg.com/element-ui/lib/index.js" > </ script> < scripttype = " module" > import Sortable, { MultiDrag, Swap} from 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/modular/sortable.esm.js' Sortable. mount ( new MultiDrag ( ) , new Swap ( ) ) new Vue ( { el: '#app' , data ( ) { return { x: [ { value: 'time' , label: '' } , { value: 'mon' , label: '星期一' } , { value: 'tue' , label: '星期二' } , { value: 'wed' , label: '星期三' } , { value: 'thu' , label: '星期四' } , { value: 'fri' , label: '星期五' } , { value: 'sat' , label: '星期六' } , { value: 'sun' , label: '星期日' } ] , schedule: [ { time: '9:00~10:00' , mon: '语文' , tue: '' , wed: '' , thu: '' , fri: '' , sat: '' , sun: '' } , { time: '10:00~11:00' , mon: '' , tue: '英语' , wed: '' , thu: '' , fri: '' , sat: '' , sun: '' } , { time: '11:00~12:00' , mon: '' , tue: '' , wed: '数学' , thu: '' , fri: '化学' , sat: '' , sun: '' } ] } } , mounted ( ) { this . initDrag ( ) } , methods: { getCellClassName ( { row, column } ) { if ( ! row[ column. property] ) { return 'filtered' } return '' } , initDrag ( ) { const children = document. querySelector ( '.drag-table .el-table__body-wrapper tbody' ) . childrenfor ( let index = 0 ; index < children. length; index++ ) { const el = children. item ( index) Sortable. create ( el, { group: { name: 'shared' } , swap: true , filter: '.filtered' , onEnd : ( evt ) => { this . updateData ( { oldRowIndex: evt. from. rowIndex, newRowIndex: evt. to. rowIndex, oldColumnIndex: evt. oldIndex, newColumnIndex: evt. newIndex} ) } } ) } } , updateData ( { oldRowIndex, newRowIndex, oldColumnIndex, newColumnIndex } ) { const schedule = JSON . parse ( JSON . stringify ( this . schedule) ) const OldProperty = this . x[ oldColumnIndex] . valueconst oldValue = schedule[ oldRowIndex] [ OldProperty] const newProperty = this . x[ newColumnIndex] . valueconst newValue = schedule[ newRowIndex] [ newProperty] schedule[ newRowIndex] [ newProperty] = oldValueschedule[ oldRowIndex] [ OldProperty] = newValuethis . schedule = [ ] this . $nextTick ( ( ) => { this . schedule = schedulethis . $nextTick ( ( ) => { this . initDrag ( ) } ) } ) } } } ) </ script> </ body> </ html> 
-知识点小结)
)
