Vuetify数据表格：如何在纵向表格中添加分隔线并修改第一列背景色？

没问题，这两个样式需求都可以通过简单的CSS来解决，我给你整理好方案和完整代码：

原代码回顾 #

<template>
  <v-data-table :items="kids" > 
    <template v-slot:body="{ items }"> 
      <tbody> 
        <tr v-for="(header, index) in firstColumns" :key="header.text" > 
          <td> {{ header }} </td> 
          <td> {{ items[index] }} </td> 
        </tr> 
      </tbody> 
    </template> 
  </v-data-table>
</template>

<script>
export default {
  data() { 
    return { 
      firstColumns: ['First', 'Second', 'Third'], 
      kids: ['Edinson Cavani', 'Marcus Rashford', 'Christiano Ronaldo'], 
    } 
  },
};
</script>

1. 添加列分隔线 #

由于你是自定义纵向表格结构，没有使用headers属性，直接通过CSS给列添加边框即可。推荐给内容列（第二列）的左侧设置边框，模拟原生表格的分隔线效果：

/* 在组件的<style scoped>标签中添加 */
.v-data-table tbody td:nth-child(2) {
  border-left: 1px solid #e0e0e0; /* Vuetify默认分隔线颜色，可自定义 */
}

2. 修改第一列背景色 #

同样通过CSS选中第一列的单元格，设置背景色即可：

/* 在组件的<style scoped>标签中添加 */
.v-data-table tbody td:first-child {
  background-color: #f5f5f5; /* 浅灰色，可替换为你需要的颜色值 */
}

完整修改后代码 #

<template>
  <v-data-table :items="kids">
    <template v-slot:body="{ items }">
      <tbody>
        <!-- 优化key值，用header本身更合理 -->
        <tr v-for="(header, index) in firstColumns" :key="header">
          <td>{{ header }}</td>
          <td>{{ items[index] }}</td>
        </tr>
      </tbody>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      firstColumns: ['First', 'Second', 'Third'],
      kids: ['Edinson Cavani', 'Marcus Rashford', 'Christiano Ronaldo'],
    };
  },
};
</script>

<style scoped>
/* 列分隔线 */
.v-data-table tbody td:nth-child(2) {
  border-left: 1px solid #e0e0e0;
}

/* 第一列背景色 */
.v-data-table tbody td:first-child {
  background-color: #f5f5f5;
}
</style>

你可以根据需求调整CSS里的颜色值，这样就能实现和示例类似的纵向表格样式啦～

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