组件 q-table 中单元格的 Quasar 条件样式

Question

我想更改 q-table 组件单元格中的颜色样式。

https://codepen.io/abkrim-the-flexboxer/pen/eYYjPZZ

{
  name: 'Active',
  align: 'center',
  label: 'Active',
  field: row => row.active,
  style: val => val ? 'color: red;' : 'color: black;',
  format: val => String(!!val),
  sortable: true
}

但这不起作用。

如果我尝试测试，这适用于所有单元格：

style: 'color: red;'

我认为这是我在 JS 中的代码的错误。

Answer 1

我认为使用 as 函数的自定义样式类已从版本 1（Refhttps://github.com/quasarframework/quasar/issues/242、https://github.com/quasarframework/quasar/issues/2326）中删除。我试过了，但它不起作用。

{
  label: 'Message',
  field: 'message',
  classes (val) {
    return val.active==1 ? 'bg-red' : 'bg-yellow'
  },
  sort: true,
  width: '500px'
}

所以最好的方法是使用槽自定义单列。

<template v-slot:body-cell-active="props">
  <q-td :props="props" :class="props.row.active==1?'text-red':'text-black'">
    {{props.row.active}}
  </q-td>
</template>

请参考以下代码笔。您需要将活动列的名称更改为小写。

https://codepen.io/Pratik__007/pen/xxxaKxg