vue.js 验证数据表：如何在竖排表格中设置分隔线，并改变第一列的背景色？

hmmo2u0o 于 2023-03-13 发布在 Vue.js

关注(0)|答案(3)|浏览(181)

我现在拥有的：

<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>

data() {
  return {
    firstColumns: ['First', 'Second', 'Third'],
    kids: ['Edinson Cavani', 'Marcus Rashford', 'Christiano Ronaldo'],
  }
},

我设法让垂直表看起来像这样：

下一步，我如何得到列之间的分隔符？我知道有：分隔符当我们设置标题，但由于这是垂直表我不设置：标题，所以我如何设置分隔符在这里？还有，任何我如何改变第一列的背景色？
最终，我想要实现的目标是这样的：

vue.js

来源：https://stackoverflow.com/questions/69119419/vuetify-data-table-how-to-get-divider-in-vertical-table-and-change-the-first-c

3条答案

按热度按时间

goucqfw61#

更改表中第一列的css，如下所示：

table tr > td:first-child {
  border-left: 1px solid #dddddd;
  background: lightgray
}

赞(0）回复(0）举报 2023-03-13

cgyqldqp2#

只需将标题和列单元格的类名添加到列的标题对象中，例如：

const header = [
  {
    text: 'My Column',
    value: 'my-column',
    class: 'with-divider',
    cellClass: 'with-divider'
  },
  ...
]

并使用css设置单元格的样式：

.with-divider {
  border-right: 1px solid grey;
}

赞(0）回复(0）举报 2023-03-13

7rfyedvj3#

为了获得Vuetify 3数据表中所有列的垂直边框，我使用了这个：

<style scoped>
  :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  }
  :deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child), .v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) { 
    border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
  }
</style>

如果您想使用作用域样式，使用:deep()是非常重要的。

赞(0）回复(0）举报 2023-03-13

我来回答

vue.js 验证数据表：如何在竖排表格中设置分隔线，并改变第一列的背景色？

3条答案

相关问题

热门标签

最新问答