表格嵌套拖拽
elementui+vue+sortable.js实现表格嵌套拖拽
1.sortable.js
2.贴代码：html部分
注：为了获取每个表格dom，所以需要给表格id，但是嵌套的表格是根据数据随机渲染出来的，所以要拼接动态id，便于获取
3. 方法调用
4.定义方法
（1）外表格-拖拽方法
（2）内表格-拖拽
（3）外表格-展开-监听事件：获取内表格数据
ps:
/*行拖拽-外表格*/
rowDropOut() {
const tbody = document.querySelector(
"#outTable .el-table__body-wrapper tbody"
);
const _this = this;
this.dropOut = Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
if (newIndex !== oldIndex) {
let data = {
lectureId: currRow.id,
to: newIndex + 1,
};
_this.updateLectureSort(data);
}
},
});
},
/*行拖拽-内表格*/
async columnDropInner(id) {
const innerTbody = document.querySelector(
`#innerTable` + id + ` .el-table__body-wrapper tbody `
);
const _this = this;
this[`dropInner${id}`] = await Sortable.create(innerTbody, {
disabled: _this.innerDisable,
onEnd({ newIndex, oldIndex }) {
const currRow = _this[`innerTableData${id}`].splice(oldIndex, 1)[0];
_this[`innerTableData${id}`].splice(newIndex, 0, currRow);
if (newIndex !== oldIndex) {
let data = {
sectionId: currRow.id,
to: newIndex + 1,
};
_this.updateSectionSort(data);
}
},
});
},
/*外表给-行监听事件-展开*/
async getRowDataOut(row, expandedRows) {
this.lectureSelectId = expandedRows.map(i => i.id);
this.lectureSelectId.map(i => {
if(row.id == i){
this[`innerTableData${i}`] = row.sections
}
})
if (expandedRows.length == 1) {
await this.$nextTick();
this.lectureSelectId.map(i => {
this.columnDropInner(i);
})
this.dropOut.options.disabled = true;
} else if (expandedRows.length == 0) {
this.dropOut.options.disabled = false;
} else {
this.lectureSelectId.map(i => {
if(this[`dropInner${i}`]){
this[`dropInner${i}`].options.disabled = true;
}
})
}
}
这样就实现啦~