在前端開發過程中,表格是一個常用的組件。在使用vue table組件的時候,表格的樣式很重要。行高是其中一個比較重要的樣式。
設置表格的行高,需要在CSS文件或者style屬性中設置tr或者td的height屬性值。
table tr { height: 40px; } 或者
... | ... | ... |
在vue table組件中,可以通過設置height屬性來設置表格的行高。這個屬性可以設置為字符串或者數字類型。
<template> <vue-table :items="items" :height="'40px'" /> </template> 或者 <template> <vue-table :items="items" :height="40" /> </template>
如果想要不同的行高,可以使用特殊的CSS選擇器來選擇不同的行。
table tr.normal { height: 40px; } table tr.highlighted { height: 60px; } 或者 <template> <vue-table :items="items"> <v-td slot-scope="{ item }" class="normal">{{ item.normal }}</v-td> <v-td slot-scope="{ item }" class="highlighted">{{ item.highlighted }}</v-td> </vue-table> </template>
如果想要給第一行和最后一行設置不同的行高,也可以使用特殊的CSS選擇器來選擇不同的行。
table tr:first-child { height: 60px; } table tr:last-child { height: 80px; } 或者 <template> <vue-table :items="items"> <v-td slot-scope="{ item, index }" :class="{ 'first-row': index === 0, 'last-row': index === items.length - 1 }">{{ item.data }}</v-td> </vue-table> </template> <style scoped> .first-row { height: 60px; } .last-row { height: 80px; } </style>
總之,在vue table組件中設置表格行高,可以使用CSS來設置,也可以使用height屬性來設置。如果需要設置不同的行高,可以使用特殊的CSS選擇器。
上一篇vue 怎么錄制音頻