mounted() { // eslint-disable-next-line @typescript-eslint/no-unsafe-call this.$nextTick(() => { // eslint-disable-next-line @typescript-eslint/no-unsafe-call void this.highlightRows() }) }, methods: { highlightRows() { const test = this.$refs.myRequestTable const tabletr = document.querySelectorAll('.q-table tbody tr'); if (tabletr instanceof NodeList && tabletr.length > 0) { for (const row of tabletr) { const stepName = row.querySelectorAll('td')[10].innerText || ''; const isClarification = stepName === 'In Clarification' || stepName === 'Supplement Event Details'; row.style.backgroundColor = ((this.event.searchInfo.ViewType === 'InProcess' && isClarification) || (this.event.searchInfo.ViewType === 'All' && isClarification) ? 'yellow' : '') } } } } 这样还是在我的页面加载完成前执行了
时间: 2024-02-27 16:52:24 浏览: 236
FDC6321C-VB场效应管一款2个N+P沟道SOT23-6封装的晶体管
如果你的代码在页面加载完成前执行,可能是因为数据还没有加载完成,导致表格还没有渲染出来。你可以尝试在获取数据的地方使用异步请求,等数据加载完成后再执行高亮行的方法。
例如,如果你使用axios获取数据,可以在mounted钩子函数中调用axios,并在成功回调中执行高亮行的方法。代码示例如下:
```
mounted() {
axios.get('/api/my-data')
.then(response => {
this.myData = response.data
this.$nextTick(() => {
this.highlightRows()
})
})
}
```
在这个例子中,我们使用axios异步请求获取数据,并在成功回调中将数据赋值给组件的myData属性。然后,我们使用$nextTick方法等待表格渲染完成后再执行highlightRows方法。
另外,你也可以在获取数据的地方使用async/await语法糖来等待数据加载完成后再执行高亮行的方法。例如:
```
async mounted() {
const response = await axios.get('/api/my-data')
this.myData = response.data
await this.$nextTick()
this.highlightRows()
}
```
在这个例子中,我们使用async/await语法糖来等待axios异步请求完成,并在成功后执行赋值和$nextTick方法。然后,我们可以直接调用highlightRows方法,因为我们已经等待了表格渲染完成。
阅读全文