<q-table ref="myRequestTable" class="col-md-12" style="margin-top: 15px" dense :pagination="pagination" :rows="rows" :columns="columns" row-key="FORM_ID" :selected-rows-label="getSelectedString" selection="multiple" :loading="loading" v-model:selected="selected" > </q-table>const myRequestTableRef = ref(null)onMounted(() => { const myRequestTable = myRequestTableRef.value if (myRequestTable != null) { highlightRows(myRequestTable) } }) function highlightRows(myRequestTable) { 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 = ((event.searchInfo.ViewType === 'InProcess' && isClarification) || (event.searchInfo.ViewType === 'All' && isClarification) ? 'yellow' : '') } } }
时间: 2024-02-27 18:52:57 浏览: 129
在你的代码中,你定义了 `myRequestTableRef` 并在 `onMounted` 钩子里访问了它。但是在 `highlightRows` 函数中,你又使用了 `this.$refs.myRequestTable` 来获取表格实例。
这会导致问题,因为 `this.$refs.myRequestTable` 和 `myRequestTableRef.value` 是不同的对象。在 `setup` 函数中,你使用了 `ref` 函数来创建了一个响应式引用,并将其赋值给了 `myRequestTableRef`。在模板中,你使用了 `ref` 指令来将表格实例赋值给了 `$refs.myRequestTable`。这两个引用虽然都指向同一个 DOM 元素,但是它们是不同的对象。
所以,在 `highlightRows` 函数中,你应该使用 `myRequestTable` 参数来访问表格实例,而不是使用 `this.$refs.myRequestTable`。
修改后的代码如下所示:
```html
<q-table
ref="myRequestTable"
class="col-md-12"
style="margin-top: 15px"
dense
:pagination="pagination"
:rows="rows"
:columns="columns"
row-key="FORM_ID"
:selected-rows-label="getSelectedString"
selection="multiple"
:loading="loading"
v-model:selected="selected"
></q-table>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const myRequestTableRef = ref(null)
onMounted(() => {
const myRequestTable = myRequestTableRef.value
if (myRequestTable != null) {
highlightRows(myRequestTable)
}
})
function highlightRows(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 = ((event.searchInfo.ViewType === 'InProcess' && isClarification) ||
(event.searchInfo.ViewType === 'All' && isClarification) ? 'yellow' : '')
}
}
}
return {
myRequestTableRef
}
}
}
</script>
```
阅读全文