vue sortable.js element ui 数据更新,页面未更新

Vue 强制刷新——$forceUpdate()

项目场景:

在一个需求中,我需要实现一个拖拽的功能,其中我使用了 sortable.js 去实现,但我发现我拖拽之后的请求后台的数据并没有渲染在页面上。

简而言之,举个例子,原先的数组是 [1,2,3],拖拽之后,变成了 [3,1,2],但在视图上并没有显现,数据未渲染

问题描述:

估计是数据没有渲染上去

原因分析:

总结:设置key这种,就像路由不重新加载的解决方法一样,也是在router-view上加key来强制刷新,所以类似很多组件不刷新的问题,加个key应该都能重新渲染试图

解决方案:

提示:这里填写该问题的具体解决方案:
例如:新建一个 Message 对象,并将读取到的数据存入 Message,然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。


// 在控制变量改变的时候进行 强制渲染更新
 
let childrenRefs = this.$refs.elTabs.$children
this.$nextTick(() => {
  childrenRefs.forEach(child => child.$forceUpdate())
})

参考该博主:博主

el-table表格数据变化,页面不更新问题

最近在做列表首页时,根据条件切换当前table,但是数据更新后,页面不刷新问题
尝试了几种方法,还是没效果

1. 在nextTick中使用this.$refs.table.doLayout()
 2. 在data赋值前清空tableData
 3. 强制刷新:this.$forceUpdate()

后面在blog中看到某位大佬的方法,给table加个key,页面就能更新了,所以Mark下

<el-table
    ref="table"
    :data="tableData"
    :key="itemKey"
></el-table>


// 在tableData赋值的地方,顺便随机设置下key,页面就会刷新了
this.itemKey = Math.random()

————————————————
版权声明:本文为CSDN博主「sven_chen93」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接
原文链接:https://blog.csdn.net/sven_chen93/article/details/110880675

然后我自己经过整理自己处理:

//  子组件
   <el-table :data="configTable.tableData" ref="commonTable"
              :key="configTable.kenNameRandom && configTable.kenNameRandom">
   </el-table>
//   configTable 是可配置的 父组件传给子组件

// 父组件
// 在拿到后台数据后,处理好数据,加的代码 
 this.configTable.tableData = (res.data || []).map((item, index) => {
            return {
              ...item,
              locationName: this.positionObj[item.location],
              index: this.getInTablePos(index)
            }
          })
          let childrenRefs = this.$refs.sortTable.$children
          this.$nextTick(() => {
            this.configTable.kenNameRandom = Math.random()
            childrenRefs.forEach(child => child.$forceUpdate())
            this.draggTable() // 原来的拖拽的方法调用,看个人业务需求
          })
Logo

前往低代码交流专区

更多推荐