如何改变b-table th的宽度

Question

我想像 screenshot.How 那样扩展 table 的行，我需要更改第 th 行的宽度吗？有什么方法可以将 class 添加到 th

I want to

    logTableField: [
  { key: "LogDate", label: "Tarih",thClass: 'bg-white text-dark' },
  { key: "LogUser", label: "Analist" },
  { key: "Description", label: " İşlem Açıklaması" },
  { key: "LogText", label: "Kullanıcı Yorumu" },
],

           <b-tab title="Kayıt Logları" v-if="this.Logs != null">
          <b-table
            id="logTable"
            striped
            hover
            :items="Logs"
            :fields="logTableField"
            per-page="10"
            :current-page="currentPageLog"
          >
            <template slot="Description" slot-scope="row">
              <div v-html="row.item.Description"></div>
            </template>
          </b-table>
          <b-pagination
            v-model="currentPageLog"
            :total-rows="Logs.length"
            per-page="10"
            aria-controls="my-table"
          ></b-pagination>
        </b-tab>

Answer 1

查看 bootstrap-vue 文档以了解表格的详细样式。

编辑：

请使用小写变量。
阅读上面列出的文档
为什么你的总宽度不是 100%？
如果您实际上想使用类，请查看 Stefanos_Apk 的答案，我认为如果有多个样式属性，这是完美的

https://codesandbox.io/s/nervous-chandrasekhar-d5e2o?file=/src/components/Table.vue

logTableField: [
    {
      key: "logDate",
      label: "Tarih",
      thStyle: { width: "10%" },
    },
    { key: "logUser", label: "Analist", thStyle: { width: "20%" } },
    {
      key: "description",
      label: " İşlem Açıklaması",
      thStyle: { width: "20%" },
    },
    {
      key: "logText",
      label: "Kullanıcı Yorumu",
      thStyle: { width: "50%" },
    },
  ],

Answer 2

您可以在字段对象中设置 thClass 属性。但是 tdClass 只接受字符串或数组，而不是对象。所以只能引用一个cssclass.

logTableField: [
  { key: "LogDate", label: "Tarih", thClass: 'nameOfTheClass' },
  { key: "LogUser", label: "Analist", thClass: 'nameOfTheClas1' },
  { key: "Description", label: " İşlem Açıklaması", thClass: 'nameOfTheClass2' },
  { key: "LogText", label: "Kullanıcı Yorumu", thClass: 'nameOfTheClass3' },
]

在你的 CSS:

 .nameOfTheClass {
      width: 10%
    },
.nameOfTheClass1 {
      width: 15%
    }
 .nameOfTheClass2 {
      width: 15%
    }
 .nameOfTheClass3 {
      width: 50%
    }

如何改变b-table th的宽度

How to change the width of b-table th

vue.js

bootstrap-4

vuejs2

vuetify.js

bootstrap-vue