function highlightRows() { const rows = document.querySelectorAll('.q-table tbody tr') if (rows instanceof NodeList) { // 类型检查 for (let i = 0; i < rows.length; i++) { const stepName = rows[i].querySelectorAll('td')[10].innerText if ((event.searchInfo.ViewType === 'InProcess' || event.searchInfo.ViewType === 'All') && (stepName === 'In Clarification' || stepName === 'Supplement Event Details')) { rows[i].style.backgroundColor = 'yellow' } else { rows[i].style.backgroundColor = '' } } } }<q-table 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>如何使用computed属性动态绑定highlightRows

由于highlightRows是一个函数，不能直接使用computed属性来动态绑定。不过，我们可以通过computed属性来动态计算表格行的样式，从而避免频繁的DOM操作。

具体步骤如下：

1. 在data中定义需要动态计算的属性，比如highlightedRows。

data() {
  return {
    highlightedRows: []
  }
}

2. 在computed中定义计算属性，比如computedRows。

computed: {
  computedRows() {
    const rows = this.$el.querySelectorAll('.q-table tbody tr')
    const computedRows = []
    for (let i = 0; i < rows.length; i++) {
      const stepName = rows[i].querySelectorAll('td')[10].innerText
      if ((event.searchInfo.ViewType === 'InProcess' || event.searchInfo.ViewType === 'All') &&
          (stepName === 'In Clarification' || stepName === 'Supplement Event Details')) {
        computedRows.push({ row: rows[i], style: { backgroundColor: 'yellow' }})
      } else {
        computedRows.push({ row: rows[i], style: { backgroundColor: '' }})
      }
    }
    return computedRows
  }
}

3. 在模板中使用computed属性来动态绑定样式。

<q-table
  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"
>
  <template v-for="(computedRow, index) in computedRows">
    <tr :key="index" :style="computedRow.style">
      <slot name="top-row" v-bind="{ computedRow }" />
      <td v-for="col in columns" :key="col.name" :class="col.alignClass">
        <slot :name="col.name" v-bind="{ row, col }" />
      </td>
      <slot name="bottom-row" v-bind="{ computedRow }" />
    </tr>
  </template>
</q-table>

这样，在computedRows属性发生改变时，表格的样式会动态更新，而不需要通过highlightRows函数来修改样式。