小白灿灿子 2021-10-11 10:23 采纳率: 72%
浏览 39
已结题

前端拖拽问题Sortable

我在父页面打开弹窗的时候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);
        });
    },
  });
},
  • 写回答

2条回答 默认 最新

  • 李筱宝 2021-10-11 11:17
    关注

    你要变化的数据是那个

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月8日
  • 创建了问题 10月11日

悬赏问题

  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
  • ¥15 请各位帮我看看是哪里出了问题
  • ¥15 vs2019的js智能提示
  • ¥15 关于#开发语言#的问题:FDTD建模问题图中代码没有报错,但是模型却变透明了
  • ¥15 uniapp的h5项目写一个抽奖动画