<template>
<div>
<el-button @click="handleDrag">{{isDisable ? '启用' : '禁用'}}拖动</el-button>
<template v-for="(item,index) in table">
<el-table :id="item.tName" row-key="date" :data="item.tableData" style="width: 100%; margin-bottom: 20px;"
:key="index">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
data() {
return {
sortTableArr: [],
isDisable: false,
table: [
{
tName: 'table1',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
{
tName: 'table2',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
{
tName: 'table3',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
],
}
},
mounted() {
this.table.forEach(tItem => {
let eleNode = document.querySelector(`#${tItem.tName} tbody`)
console.log(eleNode);
this.sortTableArr.push(Sortable.create(eleNode, {
animation: 150,
disabled: this.isDisable, // 设置初始状态,与动态切换无关
onEnd: (/**Event*/{ newIndex, oldIndex }) => {
if (newIndex !== oldIndex) {
const currRow = tItem.tableData.splice(oldIndex, 1)[0];
console.log(currRow.date)
tItem.tableData.splice(newIndex, 0, currRow); //数据互换位置
}
},
}));
})
},
methods: {
// 拖拽启用与禁用
handleDrag() {
console.log('Drag', this.isDisable)
this.isDisable = !this.isDisable
this.sortTableArr.forEach(item => {
let state = item.option("disabled"); // get
console.log('state', state)
item.option("disabled", !state); // set
})
}
}
}
</script>