Vue Bootstrap Table 添加不同的类到列

Question

我正在使用 Vue Bootstrap Table 组件，我想向不同的列添加不同的 CSS 类。我希望我的第一列文本居左，所有其他列文本居中，最后一列（右端）文本居右。这是 b-table;

的当前版本

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

有什么方法可以将类添加到特定的列或行？提前致谢。

Answer 1

您可以通过已传递给 table 的 fields 数组将 classes 添加到列，如果您将每个列设为 object。

您可以添加属性 tdClass为<tbody>内的每个单元格添加一个class，headers中的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>

Answer 2

您可以使用字段列表中的 tdClass 属性在 td 列上配置 class。这是一个 link 到一个有效的 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

Vue Bootstrap Table 添加不同的 类 到列

Vue Bootstrap Table add different classes to columns

vue.js

bootstrap-vue

Vue Bootstrap Table 添加不同的类到列