我在父页面打开弹窗的时候copy了一份数据值,然后我在子页面弹窗列用拖拽,弹窗的copy数据拖拽成功但是列表数据没有变化,必须页面全部刷新才会变化,后台存的值都是对的
各位 教教我 实在没有办法了!
弹窗js:
import draggable from "vuedraggable";
import Sortable from "sortablejs";
drag() {
debugger;
const el = document.querySelectorAll(
"#mytable>.el-table__body-wrapper>table>tbody"
)[0];
console.log(el);
Sortable.create(el, {
disabled: false, // 拖拽不可用? false 启用
ghostClass: "sortable-ghost", //拖拽样式
animation: 150, // 拖拽延时,效果更好看
onEnd: (e) => {
// 拖拽结束时的触发
debugger;
// 拖拽结束时的触发
let arr = this.dataContents.controlCustoms; // 获取表数据
console.log(e.newIndex); //0
console.log(e.oldIndex); //3
let temp = arr[e.oldIndex];
arr.splice(e.oldIndex, 1);
arr.splice(e.newIndex, 0, temp);
this.controlCustomsCopy = new Array();
// this.dataContents.controlCustoms = new Array();
//this.controlCustomsCopy = this.dataContents.controlCustoms ;
this.$nextTick(function() {
this.controlCustomsCopy = arr;
//this.controlCustomsCopy = this.dataContents.controlCustoms;
// this.dataContents.controlCustoms = this.controlCustomsCopy;
this.$forceUpdate();
console.log(this.dataContents.controlCustoms);
setTimeout(() => {
//alert(111)
this.$forceUpdate();
}, 100);
});
},
});
},