效果如下:
拖拽情况:
1、表格嵌套,子表进行拖拽,不能跨表拖拽,父表不能拖拽,引用了sortable.js插件
以下是嵌套表格拖拽代码:
html:
<template>
<el-table :data="tableData" style="width: 100%" border @expand-change="expandChange" default-expand-all>
<el-table-column type="expand" width="45">
<template slot-scope="scope">
<el-table :data="scope.row.children" border class="expandTable">
<el-table-column prop="date" label="日期2" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名2" width="180">
</el-table-column>
<el-table-column prop="address" label="地址2">
</el-table-column>
</el-table>
</template>
</el-table-column>
<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>
js:
import Sortable from 'sortablejs'
export default {
data() {
return {
arr: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
children: [{
date: '2016-05-04',
name: '1',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '2',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '3',
address: '上海市普陀区金沙江路 1517 弄2'
}]
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
children: [{
date: '2016-05-04',
name: '4',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '5',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '6',
address: '上海市普陀区金沙江路 1517 弄2'
},
{
date: '2016-05-04',
name: '8',
address: '上海市普陀区金沙江路 1517 弄2'
}]
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
date: '2016-05-04',
name: '9',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '10',
address: '上海市普陀区金沙江路 1517 弄2'
}, {
date: '2016-05-04',
name: '11',
address: '上海市普陀区金沙江路 1517 弄2'
},
{
date: '2016-05-04',
name: '12',
address: '上海市普陀区金沙江路 1517 弄2'
}]
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
], // 模拟数据
tableData: [], //表格数据
tempTableData: [], // 暂存表格数据
tbodyList:null, //表格html
}
},
created() {
this.getTableData()
},
mounted() {
// 拿到所有子表的html,并注册拖拽事件,如果子表不是默认全部展开的话,可以不用写这一步骤
this.$nextTick(()=>{
this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
this.dropTable(this.tbodyList);
})
},
methods: {
getTableData() {
// 模拟请求获取表格数据
//this.$axios(`url`).then(res => {
this.tableData = this.arr;
this.tempTableData = this.arr; //存起来,拖拽后进行对比
//})
},
// 表格展开重新渲染
expandChange() {
this.$nextTick(() => {
this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
this.dropTable( this.tbodyList)
})
},
//行拖拽
dropTable(tbodyList) {
let _this = this;
let tbody = tbodyList;
console.log(tbody);
for (let i = 0; i < tbody.length; i++) {
Sortable.create(tbody[i], {
onEnd({ newIndex, oldIndex }) {
console.log(11111111);
// 手误拖拽,不执行后面操作
if (newIndex == oldIndex) return;
// 重新渲染
_this.tableData[i]['children'].splice(newIndex, 0, _this.tableData[i]['children'].splice(oldIndex, 1)[0]);
var newArray = _this.tableData[i]['children'].slice(0);
_this.tableData[i]['children'] = [];
_this.$nextTick(function () {
_this.tableData[i]['children'] = newArray;
_this.dropTableSendRequest(i);// i 为父表下标
});
},
})
}
},
// 将数据传到后台
dropTableSendRequest(i) {
// 找到拖拽子表的父表
let temparr = this.tempTableData.find((item, index) => {
if (index == i) {
return item
}
})
console.log(temparr);
// url,data按需传
//this.axios.post('url', 'data').then(res => {
this.getTableData();
// this.$message({
// type: res.data.type,
// message: res.data.message
// })
//})
}
}
}
2、单表拖拽
单表拖拽比较简单,以下是代码
html:
<template>
<el-table :data="tableData" style="width: 100%" border>
<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>
js:
import Sortable from 'sortablejs'
export default {
data() {
return {
arr: [
{
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 弄'
}
], // 模拟数据
tableData: [], //表格数据
tempTableData: [], // 暂存表格数据
tbodyList:null, //表格html
}
},
created() {
this.getTableData()
},
mounted() {
// 拿到所有子表的html,并注册拖拽事件,如果子表不是默认全部展开的话,可以不用写这一步骤
this.$nextTick(()=>{
this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
this.dropTable(this.tbodyList);
})
},
methods: {
getTableData() {
// 模拟请求获取表格数据
//this.$axios(`url`).then(res => {
this.tableData = this.arr;
this.tempTableData = this.arr; //存起来,拖拽后进行对比
//})
},
//行拖拽
dropTable() {
tbody = document.querySelector('.el-table__body-wrapper tbody');
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
if (newIndex == oldIndex) return;
this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
var newArray = this.tableData.slice(0);
this.tableData= [];
this.$nextTick(function () {
this.tableData= newArray;
this.dropTableSendRequest(oldIndex, newIndex)
});
}
})
},
// 将数据传到后台
dropTableSendRequest(oldIndex,newIndex) {
// url,data按需传
//this.axios.post('url', 'data').then(res => {
this.getTableData();
// this.$message({
// type: res.data.type,
// message: res.data.message
// })
//})
}
}
}
有问题欢迎留言=3=