【bug】【vue+el-table】数据重绘,刷新数据(组件嵌套较深,数据结构包含children),页面未及时更新,已解决

问题不太好描述,复现一下场景:

列表页面,通过新增按钮打开弹窗

弹窗中还有列表,通过弹窗中的新增按钮操作列表

列表中有插槽,其中一项点击可以打开新的弹窗

新的弹窗用来勾选数据回显到列表中,处理为当前项的子节点

点确定之后,列表被处理成类似这种效果

通过确定按钮,将勾选的list数组传到父组件,进行赋值操作

然后log打印父组件列表的数据,发现打印有值,但是页面上什么都不展示

解决这种问题,常用的方法有

this. set / 扩展运算符 / this.nextTick /setTimeout

我都试过了,依然不起作用

解决办法是父组件的列表每次新增的时候得有children字段

代码如下:

父组件的新增

bash 复制代码
addList() {
      this.dataSource.push({
       
        id: uuid(),
        hasItem: false,
        children:[],//必须有
      })
    },

父组件列表,用的是element文档上树形数据与懒加载示例的第一个

bash 复制代码
        <el-table
          row-key="id"
          default-expand-all
          :data="dataSource"
          :tree-props="{ children: 'children' }"
          border
          ref="table"
          highlight-current-row
          :height="screenHeight - 500 + 'px'"
          class="elTable mgrTable"
          style="width: 100%; margin-bottom: 20px"
        >

勾选数据后的确定事件

bash 复制代码
  checkTreesure(arr) {
  //处理索引,可忽略
      let childrenSum = this.dataSource.reduce((sum, item) => {
        return sum + (item.children ? item.children.length : 0)
      }, 0)
      let newIdx = this.checkTreeIndex - childrenSum
      if (!this.dataSource[newIdx]) {
        this.dataSource.splice(newIdx, 1, {})
      }
      if (!this.dataSource[newIdx].children) {
        this.dataSource[newIdx].children = []
      }
      //重点,使用this.$set或者直接赋值也可以
        this.$set(this.dataSource[newIdx], 'children', arr.map(item => {
    return {
      id: uuid(),
      sizes: item.dictValue,
      hasItem: true,
      pid: this.dataSource[newIdx].id,
    };
  }));
  //替换写法,直接赋值
  //       const newArr = arr.map(item => {
//     return {
//       id: uuid(),
//       sizes: item.dictValue,
//       hasItem: true,
//       pid: this.dataSource[newIdx].id,
//     };
//   })
// this.dataSource[newIdx].children = newArr
    this.$nextTick(() => {
    this.$refs.table.doLayout();
  });  
      this.checkTreeVisible = false
    },

总结:

这个bug应该不是组件嵌套过深的原因,而是新增的时候没有加children,组件的渲染依赖于特定的数据结构或状态,利用索引直接设置一个项,Vue 可能无法追踪它的变化

相关推荐
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
架构个驾驾1 小时前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
偷偷的卷1 小时前
【算法笔记 day three】滑动窗口(其他类型)
数据结构·笔记·python·学习·算法·leetcode
梨子同志2 小时前
Vue 生命周期
前端·vue.js
梨子同志2 小时前
Vue 组件通信详解
前端·vue.js
拾光拾趣录2 小时前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
markyankee1012 小时前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录2 小时前
在 Vue 中使用 SVG 图标
前端·vue.js·svg
凤年徐2 小时前
【数据结构】时间复杂度和空间复杂度
c语言·数据结构·c++·笔记·算法