根据道具项目格式化 Quasar Table 中的行

Question

使用 q-table 我试图根据它包含的 name 格式化特定行，但是当我添加计算 class 作为 class 绑定。有没有办法让它工作，以便可以使用 class 绑定的多个条件？

这里 https://codepen.io/pokepim/pen/wvGWNEp 您可以看到，当使用此计算 class 绑定时，table 未加载。

Answer 1

您在计算属性中调用的代码 this.props.row.name 是错误的用法。

计算属性的上下文是当前组件的实例，不是q-tr上下文，所以this.props.row不存在。

正确的用法是将 props.name 或 v-slot:body="props" 传递给一个方法，在该方法中 returns 根据不同的条件，您期望的 class 名称。

例如(The codepen):

模板：

  <template v-slot:body="props">
    <q-tr :props="props"  :class="tableFormat(props.row.name)">
      <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.value }}</q-td>
    </q-tr>
  </template>

脚本：

{
  methods: {
    tableFormat: function (name) {
      return name ? 'text-bold' : ''
    }
  }
}

根据道具项目格式化 Quasar Table 中的行

Formatting rows in Quasar Table based on prop item

vue.js

vuejs2

quasar-framework