const tabletr = this.$refs.myRequestTable.$q.querySelectorAll('tbody > tr')

如果您使用的是 Quasar Framework，可以使用 `$q` 属性来访问 Quasar 的 DOM API。因此，您可以使用以下代码来获取每行的 `tr` 元素：

const tabletr = this.$refs.myRequestTable.$q.selectAll('tbody > tr');

请注意，`$q` API 与原生的 DOM API 有所不同。在 Quasar 中，`$q.selectAll` 方法返回的是一个 Quasar 的 DOM 元素集合（一个 `NodeList` 对象），而不是原生的 `NodeList` 对象。因此，您可能需要对返回的元素集合调用 Quasar 的方法来访问元素。

相关问题

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' : '') } } } } 这样还是在我的页面加载完成前执行了

如果你的代码在页面加载完成前执行，可能是因为数据还没有加载完成，导致表格还没有渲染出来。你可以尝试在获取数据的地方使用异步请求，等数据加载完成后再执行高亮行的方法。

例如，如果你使用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方法，因为我们已经等待了表格渲染完成。

<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' : '') } } }

在你的代码中，你定义了 `myRequestTableRef` 并在 `onMounted` 钩子里访问了它。但是在 `highlightRows` 函数中，你又使用了 `this.$refs.myRequestTable` 来获取表格实例。

这会导致问题，因为 `this.$refs.myRequestTable` 和 `myRequestTableRef.value` 是不同的对象。在 `setup` 函数中，你使用了 `ref` 函数来创建了一个响应式引用，并将其赋值给了 `myRequestTableRef`。在模板中，你使用了 `ref` 指令来将表格实例赋值给了 `$refs.myRequestTable`。这两个引用虽然都指向同一个 DOM 元素，但是它们是不同的对象。

所以，在 `highlightRows` 函数中，你应该使用 `myRequestTable` 参数来访问表格实例，而不是使用 `this.$refs.myRequestTable`。

修改后的代码如下所示：

<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>