如何更改v-data-table行高

Question

我有一个v-data-table的问题，我想减少行的高度来匹配dense。我尝试为每个模板设置负边距，但它不起作用。我尝试了很多方法，但没有找到任何解决方案。

谢谢！

​

.cell-height table tbody td, table tbody th {
        margin-top: -15%;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<v-data-table :headers="headersProjectConfig" :items="projectConfig" class="cell-height" hide-default-footer dense>
    <template v-slot:item.isSelected="{ item }">
        <v-checkbox v-if="item.selection"></v-checkbox>
    </template>
    <template v-slot:item.text="{ item }">
        <span>{{item.text}}</span>
    </template>

    <template v-slot:item.averageTO="{ item }">
        <v-text-field type="number" hide-details :rules="[v => !!v || 'This field is required']" required></v-text-field>
    </template>
    <template v-slot:item.averageMargin="{ item }">
        <v-text-field type="number" hide-details :rules="[v => !!v || 'This field is required']" required></v-text-field>
    </template>
</v-data-table>
</template>

​

Answer 1

你到底想要达到什么目的？您可以只使用css。用于修改表行的tr。

<style lang="css">
tr{
  height: 70px !important;
}
</style>