如何改变b表的宽度答案

【问题标题】：How to change the width of b-table th如何改变b表的宽度
【发布时间】：2021-04-12 08:42:16
【问题描述】：

我想像屏幕截图一样扩展表格的行。如何更改 th 的宽度？有什么办法可以添加类到th

    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>

【问题讨论】：

标签： vue.js bootstrap-4 vuejs2 vuetify.js bootstrap-vue

【解决方案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%" },
    },
  ],

【讨论】：

您的答案中有关如何解决此问题的代码将很有用。如果您链接的 URL 已关闭/无法访问，则此答案对任何人都没有用
我只是想鼓励作者在发布之前先阅读文档。大多数时候自己检查文档会更快，恕我直言:)

【解决方案2】：

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

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

【讨论】：