Vuetify v-data-table单元格背景色问题：仅文字上色而非整单元格

方法1：利用列定义的tdClass属性（推荐） #

直接在表格的列配置中，通过tdClass绑定函数，根据每行数据的值返回对应样式类，样式会直接作用在单元格（<td>）元素上，自然覆盖整个单元格。

示例代码：

// 列配置数组
const columns = [
  // 其他列...
  {
    title: '客户备注',
    key: 'customerRemark',
    // 复用你已有的custRmk逻辑
    tdClass: (item) => custRmk(item.customerRemark)
  }
];

方法2：通过插槽让容器占满单元格 #

如果需要自定义插槽渲染内容，确保内部容器填满整个单元格空间：

<v-data-table :items="items" :columns="columns">
  <template v-slot:item.customerRemark="{ item }">
    <div 
      :class="custRmk(item.customerRemark)"
      style="width: 100%; height: 100%; padding: 0.75rem;"
    >
      {{ item.customerRemark }}
    </div>
  </template>
</v-data-table>

设置width:100%和height:100%让容器填满单元格，手动设置与表格默认一致的padding避免内容错位。

问题原因 #

你之前的样式类是加在单元格内部的文字容器上，该容器默认仅包裹文字区域，未占满单元格的宽高，因此背景色只显示在文字周围。将样式作用于<td>元素，或让内部容器填满单元格，即可实现整个单元格变色的效果。

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