根据道具项目格式化类星体表中的行

问题描述

使用q表，我试图基于它包含的name格式化特定的行，但是当我将计算的class添加为类绑定时，不知何故该表未显示。 有没有一种方法可以使它起作用，以便可以使用多个用于类绑定的条件？

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

解决方法

您在计算属性内调用this.props.row.name的代码使用错误。

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

正确的用法是将props.name中的v-slot:body="props"传递到一个方法中，该方法内部将根据不同的条件返回所需的类名。

例如（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' : ''
    }
  }
}