如何在 bootstrap-vue table 中对齐列？

Question

Using https://bootstrap-vue.js.org/docs/components/table in vue/cli / "bootstrap-vue": "^2.1.0" 我没有找到如何为所有列设置对齐并将其更改为任何专栏。我试过：

<b-card-body>
        <b-table responsive="sm" striped hover small :items="users" :fields="usersFields" align-v="end">
            <template v-slot:cell(id)="data">
                <div class="-align-right">{{ data.value }}</div>
            </template>

            <template v-slot:cell(status)="data"  >
                <div class="-align-left">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
            </template>

但失败了，因为所有列都居中。

有多正确？

Answer 1

Class -align-right 和 -align-left 是无效的 Bootstrap v4 CSS class 名称。 Bootstrap 文本对齐 class 是：

text-right
text-left
text-center

见https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment

Answer 2

我最喜欢的方式是在字段选项中设置：

usersFields: [
  {
    key: 'id',
    label: 'ID',
    thClass: 'text-right',
    tdClass: 'text-right',
  },
  {
    key: 'status',
    label: 'Status',
    thClass: 'text-left',
    tdClass: 'text-left',
  },
]

如何在 bootstrap-vue table 中对齐列？

How align columns in bootstrap-vue table?

bootstrap-vue