Vue Bootstrap Table 为列添加不同的类答案

【问题标题】：Vue Bootstrap Table add different classes to columnsVue Bootstrap Table 为列添加不同的类
【发布时间】：2021-08-30 05:01:33
【问题描述】：

我正在使用 Vue Bootstrap Table 组件，我想将不同的 CSS 类添加到不同的列。我希望我的第一列有 text-left，所有其他的 text-center 和最后一个（右端）有 text-right。这是当前版本的 b 表；

    <div class="table-responsive mb-0">
      <b-table
        :items="tableData"
        :fields="displayColumn"
        responsive="sm"
        :per-page="perPage"
        :current-page="currentPage"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :filter="filter"
        :filter-included-fields="filterOn"
        @filtered="onFiltered"
        hover
      >
    <template #cell(detail)="row">
      <button @click="toggleRightBar(); changeRightBarContent(row.index)" class="btn btn-outline-primary toggle-right">
        <i class="bx bx-detail toggle-right"></i>
      </button>
    </template>
      </b-table>

有没有办法将类添加到特定的列或行？提前致谢。

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

如果将每个类都设为对象，则可以通过已传递给表的 fields 数组向列添加类。

您可以添加属性tdClass 为<tbody> 中的每个单元格添加一个类，thClass 中的标题为<thead> 或只是class 为两者。

https://bootstrap-vue.org/docs/components/table#field-definition-reference

new Vue({
  el: "#app",
  data() {
    return {
      fields: [
        { key: "isActive", tdClass: "text-left" },
        { key: "first_name", tdClass: "text-center" },
        { key: "last_name", tdClass: "text-center" },
        { key: "age", tdClass: "text-right" }
      ],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-table :items="items" :fields="fields" bordered></b-table>
</div>

【讨论】：

感谢您的详细解释！帮助很大

【解决方案2】：

您可以使用字段列表中的tdClass 属性在您的 td 列上配置一个类。这是一个工作fiddle的链接

相关代码：

new Vue({
    el: '#app',
      data() {
        return {
          // Note 'isActive' is left out and will not appear in the rendered table
          fields: [
            {
              key: 'last_name',
              sortable: true
            },
            {
              key: 'first_name',
              sortable: false
            },
            {
              key: 'age',
              label: 'Person age',
              sortable: true,
              // 'my-class' will be applied to all the <td> elements for this column
              tdClass: 'my-class'
            }
          ],
          items: [
            { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
            { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
            { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
            { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
          ]
        }
      }
    })

<div id="app">
  <div>
      <b-table striped hover :items="items" :fields="fields"></b-table>
    </div>
</div>

在文档中了解更多信息：https://bootstrap-vue.org/docs/components/table#field-definition-reference

【讨论】：