问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

tree组件第一次回显正常，第二次不回显了什么原因？

头像
嘿嘿
    29712985
    头像
    乔治
      12.4k1329
       <el-tree
            ref="treeRef"
            :data="dataTree"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            default-expand-all
            :check-strictly="true"
            :default-checked-keys="check_id"
            @check-change="handleNodeClick"
          />

      父组件传过来的值

      const props = defineProps<{
  dialogEdit: boolean;
  edittData: object;
  ID: Array<string>;
}>();
let check_id = ref<string[]>([]);

watch(
  () => props.dialogEdit,
  () => {
    dialogEdit.value = props.dialogEdit;
    check_id.value = props.ID;
    console.log("xxxxxxxxxx", check_id.value);
  }
);

      图片.png
      图片.png

      Microsoft前端vue.jstypescripthtml5css3
      阅读 298
      avatarAI BotBETA

      根据你提供的代码和描述，问题可能出在watch函数上。在Vue 3中，watch函数的第一个参数应该是一个返回你想要观察值的函数，而不是直接传入一个属性。而在你的代码中，你是直接传入了props.dialogEdit。当props.dialogEdit变化时，这个值可能会被缓存，因此第二次不会触发watch函数。

      你可以尝试将watch函数修改为以下形式：

      watch(
  () => props.dialogEdit,
  (newVal, oldVal) => {
    dialogEdit.value = newVal;
    check_id.value = props.ID;
    console.log("xxxxxxxxxx", check_id.value);
  }
);

      这样，当props.dialogEdit变化时，watch函数就会重新计算其值，并触发回调函数。

      另外，请确保props.ID的值在第二次watch触发时是有效的，且与你期望的check_id值相符。如果props.ID的值在第二次没有正确更新，那么check_id的值也不会改变，这可能导致树组件没有正确回显。

      如果问题仍然存在，那么可能需要更深入地检查你的代码，看看是否有其他因素影响了树组件的回显。例如，你可以检查dataTree和defaultProps的值是否在第二次回显时发生了变化，或者handleNodeClick函数是否有可能影响了树组件的状态。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏