Vue.js 基于prop项格式化Quasar表中的行

使用q-table，我试图根据它包含的

名称

格式化特定行，但是当我将computed

类

添加为类绑定时，不知何故，该表没有显示出来。 有没有一种方法可以让它工作，这样就可以使用类绑定的多个条件

这里

---

使用此计算类绑定时，您可以看到表未加载。

您在计算属性内调用的代码

this.props.row.name

使用错误

computed属性的上下文是当前组件的实例，而不是

q-tr

context，因此

this.props.row

不存在

正确的用法是将

v-slot:body=“props”

的

props.name

传递到一个方法中，在该方法中根据不同的条件返回您期望的类名

例如（）：

模板：

  <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' : ''
    }
  }
}

---

您在computed属性中调用的代码

this.props.row.name

使用错误

computed属性的上下文是当前组件的实例，而不是

q-tr

context，因此

this.props.row

不存在

正确的用法是将

v-slot:body=“props”

的

props.name

传递到一个方法中，在该方法中根据不同的条件返回您期望的类名

例如（）：

模板：

  <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' : ''
    }
  }
}