bootstrap-vue table td 元素样式

Question

通过为 b-table 元素的 <td> 标签提供样式，我遇到了一个问题。

这是模板：

     <b-table
      :fields="fields"
      :items="items"
      class="mx-1 mt-2"
      v-if="items && items.length > 0"
    >
      <template
        slot="email"
        slot-scope="row"
      >
        <div :title="row.item.email">
          <p class="user-email">{{row.item.email}}</p>
        </div>
      </template>
    </b-table>

这是字段：

     fields: [
      { key: "email", label: "Email"},
      { key: "user", label: "Name" },
      { key: "role", label: "Role" }
    ],

我想将此表的 <td> 的最大宽度为 300px。请帮忙！

原文由 Arevshatyan Gegham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 fields: [
      { key: "email", label: "Email", tdClass: 'nameOfTheClass'},
      { key: "user", label: "Name" , tdClass: 'nameOfTheClass'},
      { key: "role", label: "Role" , tdClass: 'nameOfTheClass'}
]

在你的 CSS 中：

 .nameOfTheClass {
   max-width: 300px;
}

原文由 Jns 发布，翻译遵循 CC BY-SA 4.0 许可协议