vuetify v-data-table item-class 使用方法 hover颜色

String

<v-data-table
     :headers="headers"
     :items="lines"
      item-class="color"
      ...
</v-data-table>
data: () => ({
     lineas: [
       {text: 'Uai', color: 'red-line'},
       {text: 'HH', color: 'red-line'},
       {text: 'Liujiaji', color: 'blue-line'},
      ],
})
<style>
    .blue-line td {
        color: green;
    }
    .red-line td{
        color: red;
    }
</style>

Function

<v-data-table
    :headers="headers"
    :items="items"
    :item-class="rowClass"
></v-data-table>
rowClass(item) {
        console.log(item)
        const rowClass = 'liujiaji-tr-class'
        return rowClass;
    }
<style lang="css">
.liujiaji-tr-class {
  background-color: green;
}
</style>

hover颜色

.liujiaji-tr-class:hover {
  background-color: green !important;
}

以上酌情加 ::v-deep

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容