第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何使用插槽在 Vuetify 數(shù)據(jù)表中設置分組行的樣式?

如何使用插槽在 Vuetify 數(shù)據(jù)表中設置分組行的樣式?

MMTTMM 2021-11-25 15:22:05
有沒有人v-slot在最新的 Vuetify 版本中實現(xiàn)了分組行?他們的例子是這樣的:<template>  <v-data-table    :headers="headers"    :items="desserts"    item-key="name"    group-by="category"    class="elevation-1"    show-group-by  ></v-data-table></template><script>  export default {    data () {      return {        headers: [          {            text: 'Dessert (100g serving)',            align: 'left',            value: 'name',          },          { text: 'Category', value: 'category' },        ],        desserts: [          {            name: 'Frozen Yogurt',            category: 'Ice cream',          },          {            name: 'Ice cream sandwich',            category: 'Ice cream',          },          {            name: 'Eclair',            category: 'Cookie',          },          {            name: 'Cupcake',            category: 'Pastry',          },          {            name: 'Gingerbread',            category: 'Cookie',          },          {            name: 'Jelly bean',            category: 'Candy',          },          {            name: 'Lollipop',            category: 'Candy',          },          {            name: 'Honeycomb',            category: 'Toffee',          },          {            name: 'Donut',            category: 'Pastry',          },          {            name: 'KitKat',            category: 'Candy',          },        ],      }    },  }</script>這有效,但我想推出我自己的風格。我試過這樣的事情:<template v-slot:group="data">   {{data}}</template>我看到了對象,但缺少樣式。據(jù)我所知,它在文檔中丟失了。如果有人已經實現(xiàn)了這樣的東西,將不勝感激。
查看完整描述

1 回答

?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

是的,您可以通過從項目道具或硬編碼動態(tài)添加類來在組中擁有自己的風格


使用 Vuetify 2.x 更新了 codepen:https ://codepen.io/chansv/pen/wvvzXRj?editors = 1010


<div id="app">

  <v-app id="inspire">

    <v-data-table

      :headers="headers"

      :items="desserts"

      item-key="name"

      group-by="category"

      class="elevation-1"

      show-group-by

    >

      <template v-slot:group="props">

   <span class="font-weight-bold">

                 {{props.group }}

              </span>

        <v-data-table

      :headers="props.headers"

      :items="props.items"

      item-key="name"

      hide-default-footer

    >

          <template v-slot:body="{ items }">

            <tbody>

              <tr v-for="item in items" :key="item.name" class="success">

              <td>{{ item.name }}</td>

            </tr>

            </tbody>

          </template>

        </v-data-table>

</template>

   </v-data-table>

  </v-app>

</div>


new Vue({

  el: '#app',

  vuetify: new Vuetify(),

  data () {

    return {

      headers: [

        {

          text: 'Dessert (100g serving)',

          align: 'left',

          value: 'name',

        },

        { text: 'Category', value: 'category' },

      ],

      desserts: [

        {

          name: 'Frozen Yogurt',

          category: 'Ice cream',

        },

        {

          name: 'Ice cream sandwich',

          category: 'Ice cream',

        },

        {

          name: 'Eclair',

          category: 'Cookie',

        },

        {

          name: 'Cupcake',

          category: 'Pastry',

        },

        {

          name: 'Gingerbread',

          category: 'Cookie',

        },

        {

          name: 'Jelly bean',

          category: 'Candy',

        },

        {

          name: 'Lollipop',

          category: 'Candy',

        },

        {

          name: 'Honeycomb',

          category: 'Toffee',

        },

        {

          name: 'Donut',

          category: 'Pastry',

        },

        {

          name: 'KitKat',

          category: 'Candy',

        },

      ],

    }

  },

})



查看完整回答
反對 回復 2021-11-25
  • 1 回答
  • 0 關注
  • 250 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

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

公眾號

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