javascript - 如何应用 b 表字段 thClass 或 tdClass 或 class

Question

<template>
 <b-table
   striped hover
   :fields="fields"
   :items="list"
   class="table"
 >
</template>
<style lang="scss" scoped>
  .table >>> .bTableThStyle {
    max-width: 12rem;
    text-overflow: ellipsis;
  }
</style>
<script lang="ts">
 import { Component, Vue, Watch } from "nuxt-property-decorator";
 @Component(...)
 export default class className extends Vue {
  fields = [
   {label: 'index', key: 'index', sortable: true, filter: true, editable: true},
   {label: 'title', key: 'title', sortable: true, filter: true, editable: true, tbClass: 'bTableThStyle'},
  ];
 }
</script>

在上面的代码片段中，我尝试使用 tbClass 仅将 CSS 应用于 b 表字段中的事件名称。（参考网址：bootstrap-vue table td element styles）

这没用。

目标是为字段设置一个字段的样式

Answer 1

对于您的style，您可以尝试使用以下代码：

<style lang="scss" scoped>
  /** or use this class: table thead th.bTableThStyle { ... } */
  .table .bTableThStyle {
    max-width: 12rem !important;
    text-overflow: ellipsis !important;
  }
</style>

确保您.bTableThStyle在检查元素时已添加到您的 html 中。

我希望它可以帮助你。