<! 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'
) . children
for ( 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] . value
const oldValue = schedule[ oldRowIndex] [ OldProperty]
const newProperty = this . x[ newColumnIndex] . value
const newValue = schedule[ newRowIndex] [ newProperty]
schedule[ newRowIndex] [ newProperty] = oldValue
schedule[ oldRowIndex] [ OldProperty] = newValue
this . schedule = [ ]
this . $nextTick ( ( ) => {
this . schedule = schedule
this . $nextTick ( ( ) => {
this . initDrag ( )
} )
} )
}
}
} )
</ script> </ body> </ html>
![[FE] React 初窥门径（四）：React 组件的加载过程（render 阶段）](https://img-blog.csdnimg.cn/direct/67c64049147741939b85489caefbb597.png)
