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

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() // 原来的拖拽的方法调用，看个人业务需求
          })