Question

我喜欢在q表组件的单元格中更改颜色样式

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

我认为自版本1（Ref https://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

分量q表中单元格的拟条件条件样式

1 个答案: