亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何更改 vuetify 數據表中的字體大小和/或樣式?

如何更改 vuetify 數據表中的字體大小和/或樣式?

jeck貓 2021-12-23 19:47:21
我有以下代碼,它呈現預期的表:<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 開發人員。
查看完整描述

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' 應該是一個列名數組,作為您正在動態獲取的字符串。


查看完整回答
反對 回復 2021-12-23
?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

它對我有用,不使用范圍的樣式。


.v-data-table > .v-data-table__wrapper > table > thead > tr > th{

     font-size: 16px !important; 

}


查看完整回答
反對 回復 2021-12-23
?
www說

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 開發人員。


查看完整回答
反對 回復 2021-12-23
  • 3 回答
  • 0 關注
  • 801 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號