vue3 quasar 如何实现q-table的行高亮

在 Quasar 2.x 中，你可以使用 `rowClass` 和 `cellClass` 属性来设置 q-table 的行样式和单元格样式。

`rowClass` 属性用于设置行样式，它可以是一个对象或一个函数。如果是对象，则对象的 key 是 CSS 类名，value 是一个返回布尔值的函数，用于判断是否需要应用该 CSS 类名。如果是函数，则函数接收一个参数 `rowData`，该参数包含了当前行的数据，函数需要返回一个 CSS 类名的字符串或数组，用于设置该行的样式。

示例代码如下：

<q-table
  :data="tableData"
  :columns="tableColumns"
  :row-class="rowClass"
>
</q-table>

methods: {
  rowClass(rowData) {
    if (rowData.someField === 'someValue') { // 根据 rowData 中的数据来判断该行是否需要高亮
      return 'row-highlight'
    } else {
      return ''
    }
  }
}

在上面的示例代码中，如果 rowData 中的某个字段 `someField` 的值为 `'someValue'`，则该行将会应用 CSS 类名为 `row-highlight` 的样式。如果不需要高亮，则返回空字符串即可。

同样的，你也可以使用 `cellClass` 属性来设置单元格样式。它的用法与 `rowClass` 类似，只需要将其设置在每个列定义中即可。

示例代码如下：

<q-table
  :data="tableData"
  :columns="tableColumns"
>
  <template v-for="col in tableColumns">
    <q-th :key="col.name" :class="col.headerClass">{{ col.label }}</q-th>
    <q-td :key="col.name" :class="cellClass(col, rowData)">{{ rowData[col.field] }}</q-td>
  </template>
</q-table>

methods: {
  cellClass(col, rowData) {
    if (rowData.someField === 'someValue' && col.field === 'fieldName') { // 根据 rowData 中的数据来判断该单元格是否需要高亮
      return 'cell-highlight'
    } else {
      return ''
    }
  }
}

在上面的示例代码中，如果 rowData 中的某个字段 `someField` 的值为 `'someValue'`，并且当前列的 `field` 属性为 `'fieldName'`，则该单元格将会应用 CSS 类名为 `cell-highlight` 的样式。如果不需要高亮，则返回空字符串即可。