vue2传递个子组件的数据没有更新？

  • Z时代
  • 2024-02-16
  • 分类：IT

vue"><template>
  <div>
    <div class="left">
      <Tree :data="data"></Tree>
    </div>
  </div>
</template>
<script>
import Tree from '@/components/tree/index.vue'
import {GetOrganiztionalData,GetUserList} from '@/api/detailedList'
export default {
  components: {Tree},
  data() {
    return {
      data: []
    }
  },
  props: {
    treeUserInfo: Object
  },
  created() {
    this.getOrganizational()
  },
  methods: {
    // 辅助函数：根据部门ID找到对应的部门节点
findDepartmentNode(departmentId, nodes) {
  for (const node of nodes) {
    if (node.id === departmentId) {
      return node;
    }
    // 如果该节点有子节点，递归查找
    if (node.children && node.children.length > 0) {
      const foundNode = this.findDepartmentNode(departmentId, node.children);
      if (foundNode) {
        return foundNode;
      }
    }
  }
  return null; // 如果找不到对应的部门节点
},
    getOrganizational() {
      GetOrganiztionalData({}).then(res => {
        if(this.treeUserInfo.erpCode) {
        console.log('2222')
          this.data = [res.data]
          const id  = this.treeUserInfo.erpDepCode
          this.getUserInfo(id)
        } else {
          this.data = [res.data]
        }
      })
    },
    getUserInfo(id) {
      const departmentNode = this.findDepartmentNode(id, this.data)
      if(!departmentNode.children) {
        this.$set(departmentNode, 'children', [])
      }
      const obj = {
        erpParentCode: id
      }
      let array = []
      GetUserList(obj).then(res => {
        res.data.map(item => {
          array.push({
            text:item.erpName,
            erpCode: item.erpCode
          })
        })
        departmentNode.children.push(...array)
      })
    }
  },
}
</script>

这是我写的代码，走console.log('222')的时候，传递给子组件的 data数据没有，应该怎么解决

子组件代码

<template>
  <div>
    <el-tree :data="data" :node-key="data.id" default-expand-all :expand-on-click-node="false" ref="tree" :default-checked-keys="defaultCheckKeys">
      <span slot-scope="{node,data}">
        <div>
          <!-- 没有子级的展开图标 -->
          <i v-if="!data.children" class="el-icon-folder" @click.stop="handleExpandClick(node,data)"></i>
          <i v-else-if="node.expanded" class="el-icon-folder-opened" @click.stop="handleExpandClick(node,data)"></i>
          <i v-else class="el-icon-folder" @click.stop="handleExpandClick(node,data)"></i>
        </div>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultCheckKeys: []
    }
  },
  props: {
    data: Array,
    keys:String
  },
  methods: {
    handleExpandClick(node,data) {
      node.expanded = !node.expanded;
  }
}
</script>

回答：

this.$set(this, 'data', [res.data])
this.$set(departmentNode, 'children', [...departmentNode.children, ...array])

回答：

在子组件watch一下

props: {
    data: {
      Object,
      default: null,
    },
},
watch: {
    data: {
      handler(newVal, oldVal) {
        console.log("newVal-----", newVal);
      },
      immediate: true,
    },
  },

回答：

应该是传过去了 ...
过 watch 看一下，
<el-tree :data="data" :node-key="data.id"
data 是一个数组，哪来的 data.id ...
<span slot-scope="{node,data}">
感觉你用 data 存数据很勇 ...
可能的原因：
1.el-tree 的渲染和生命周期有关系，后续获取的数据没更新内容 updateForce
2.this.data 存数据太糙了，改 treeData 试试有没有冲突
3.打印一下取到的 res 的内容，getUserInfo 注释掉，感觉想过滤用户，为啥写进参数去查？

以上是 vue2传递个子组件的数据没有更新？ 的全部内容， 来源链接： utcz.com/p/934899.html

回到顶部