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

Question

 <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);  });

Answer 1

根据你提供的代码和描述，问题可能出在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函数是否有可能影响了树组件的状态。