说明： 一个Select两个选项 （不限、定时），选择"定时"后显示TimePicker
<Select v-if="!row.showTimePicker" v-model="row.timing" style="width:100px" @on-change="onChange(row)" transfer> <Option value="不限">不限</Option> <Option value="定时">定时</Option> </Select>
<TimePicker v-if="row.showTimePicker" type="timerange" format="HH:mm" v-model="row.timeRange" transfer style="width:130px" placeholder="选择时间" />
onChange (row) {
if (row.timing === '定时') {
row.showTimePicker = true
}
},
onChange一开始这样写就会报错，但不影响前端显示
报错：
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'nodeName')"
TypeError: Cannot read properties of undefined (reading 'nodeName')
下面是由Bing GPT给出的解决方法
这个问题可能是由于 Vue 的异步更新队列。在 Vue 中，你可能已经知道，DOM 更新是异步的。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。
Vue 在内部尝试对异步队列使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
所以，为了在数据变化之后等待 Vue 完成更新 DOM，你可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
以下是如何在你的代码中使用 Vue.nextTick(callback)：
onChange (row) {
if (row.timing === '定时') {
this.$nextTick(() => {
row.showTimePicker = true
})
}
},
