Nuxt3中如何全局修改Vuetify的v-data-table列内边距？

环境 #

Nuxt3 + Vue3 + Vuetify3

问题描述 #

使用Vuetify3的v-data-table组件时，默认列内边距过大，希望全局统一调整为padding: 0 2px。

已尝试的方案 #

方案1：局部样式覆盖（可行但繁琐） #

在每个使用v-data-table的页面中添加scoped样式：

<style scoped>
.v-data-table :deep(td) {
  padding: 0 2px !important;
}
</style>

该方案需要在每个页面重复编写代码，不够优雅，因此优先考虑全局变量修改方案。

方案2：Vuetify Sass变量全局修改（待完成） #

根据Vuetify文档，v-data-table的列内边距由$table-column-padding变量控制，已完成以下步骤：

1. 确认package.json中已安装sass依赖（版本^1.63.6）：

"dependencies": {
  "@mdi/font": "^7.2.96",
  "@nuxt-alt/proxy": "^2.5.8",
  "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
  "@pinia/nuxt": "^0.5.1",
  "axios": "^1.6.8",
  "mdi": "^2.2.43",
  "mitt": "^3.0.1",
  "pinia": "^2.1.7",
  "pinia-plugin-persistedstate": "^3.2.1",
  "sass": "^1.63.6",
  "vue": "^3.3.13",
  "vue-router": "^4.2.5",
  "vue3-print-nb": "^0.1.4",
  "vuetify": "^3.4.8",
  "vuex": "^4.1.0"
}

2. 创建/assets/scss/settings.scss文件，内容如下：

@use 'vuetify/settings' with (
  $table-column-padding: 0 2,
);

3. 遇到的卡点：Vuetify文档提到的vite.config.js文件及src/styles/文件夹在当前Nuxt3项目中不存在，不清楚后续配置步骤。

当前项目核心配置文件 #

/plugins/vuetify.js #

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
import '@mdi/font/css/materialdesignicons.css'
import {aliases, mdi} from "vuetify/iconsets/mdi";

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: false,
        components: {
            ...components,
            ...labsComponents
        },
        directives,
        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
                mdi
            }
        }
    })

    nuxtApp.vueApp.use(vuetify)
})

nuxt.config.ts #

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
    'vuetify/lib/styles/main.sass',
    'mdi/css/materialdesignicons.min.css',
    '@/assets/scss/style.scss',
  ],

  build: {
    transpile: ['vuetify'],
  },

  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
  components: {
    "dirs": [
      {
        "path": "~/components/tenant",
        "global": true
      },
        "~/components"
    ]
  },
  typescript: {
    strict: true,
    typeCheck: false
  },

  runtimeConfig: {
    apiSecret: '123',
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
    }
  },
  modules:[
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ]
})

完成方案2的配置步骤 #

1. 修改nuxt.config.ts的css加载顺序：

   • 移除'vuetify/lib/styles/main.sass'，避免默认样式覆盖自定义变量
   • 将settings.scss放在css数组最前面，确保变量优先加载：

     css: [
       '@/assets/scss/settings.scss', // 优先加载变量配置
       '@/assets/css/main.css',
       'mdi/css/materialdesignicons.min.css',
       '@/assets/scss/style.scss',
     ],
     

2. 修正settings.scss的变量值：
   Vuetify的$table-column-padding需要带单位，将0 2改为0 2px（或对应rem单位0 0.125rem）：

   @use 'vuetify/settings' with (
     $table-column-padding: 0 2px,
   );
   

3. 重启Nuxt开发服务：
   修改配置后重启服务器，确保新的Sass变量生效。

完成以上步骤后，所有v-data-table的列内边距会全局应用padding: 0 2px，无需在每个页面重复编写样式。

内容的提问来源于stack exchange，提问作者wureka