如何解决根据道具项目格式化类星体表中的行
使用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' : ''
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。