如何解决如何为 vuetify 表格行添加颜色
这是我的 vuetify 表。
---------模板-----------
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
</v-data-table>
------脚本-------------
headers: [
{
text: 'Campaign Id',align: 'start',sortable: false,value: 'id',},{ text: 'Created by',value: 'created' },{ text: 'Controls',value: 'control' },],desserts: [
{
id: '1',created:'ABBC',control:''
},{
id: '2',control: '',]
我想为表格行添加颜色,一行接一行。我该怎么做?
解决方法
我为您提供了这个解决方案。 https://codepen.io/lino96/pen/yLaRGmX?editors=101
代码 HTML
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:item-class="(item) => item.class">
</v-data-table>
</v-app>
</div>
代码JS
new Vue({
el: '#app',vuetify: new Vuetify(),data () {
return {
headers: [
{
text: 'Campaign Id',align: 'start',sortable: false,value: 'id',},{ text: 'Created by',value: 'created' },{ text: 'Controls',value: 'control' },],desserts: [
{
id: '1',created:'ABBC',control:'',class: 'purple darken-1 white--text'
},{
id: '2',control: '',class: 'yellow darken-2'
},}
},})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。