3 回答

TA貢獻1846條經驗 獲得超7個贊
如果您沒有太多列,您可以為每個列使用一個插槽,并將它們包裝在一個帶有自定義類的 div 中,如下所示:
<template v-slot:item.name="{ item }">
<div class="customStyle">{{ item.name }}</div>
</template>
編輯:在您動態獲取列的情況下,您可以使用已經嘗試過的主體槽,但隨后您將擁有整個表格主體的自定義樣式。試一試如下,未經測試。
<template v-slot:body="{ items }">
<tr v-for="item in items" :key="item.id" class="customClass">
<td v-for="col in cols">
{{ item.col }}
</td>
</tr>
</template>
'cols' 應該是一個列名數組,作為您正在動態獲取的字符串。

TA貢獻1869條經驗 獲得超4個贊
它對我有用,不使用范圍的樣式。
.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
font-size: 16px !important;
}

TA貢獻1775條經驗 獲得超8個贊
我有以下代碼,它呈現預期的表:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
</v-data-table>
我希望附加display-2類對我有用,但它似乎沒有任何效果:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2 display-2"
>
</v-data-table>
我也嘗試了以下方法,但它只是渲染了一堆空row元素。這并不令人震驚,因為我想 vuetify 現在希望我為每一行提供一個完整的模板?
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:item="props">
<tr class="display-2"></tr>
</template>
</v-data-table>
在我最后一次嘗試中,我的代碼td每行渲染的元素比我預期的要多,而且所有列都是空的:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="row in items">
<td v-for="col in row"
class="display-2">
{{ col }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
我做錯了什么,有沒有更簡單的方法?
順便說一句:我不是 JavaScript 開發人員。
添加回答
舉報