bootstrap-vue表td元素样式

Question

我给<td>b-table元素的标签赋予样式有问题。

这是模板：

    <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 。请帮忙！

Answer 1

在这里：https ://bootstrap-vue.js.org/docs/components/table/ 您可以阅读：“class、thClass、tdClass 等不适用于在作用域 CSS 中定义的类”。所以这可能是它对你不起作用的情况。如果你想为你的头设计样式，你可以在你的字段对象中使用 thStyle 属性，即：

{
   key: 'test', label: 'Test', thStyle: { backgroundColor: '#3eef33'}
}

希望这会有所帮助。

Answer 2

您可以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;
}

Answer 3

我设法让它为我工作的唯一方法是在桌面上使用 Vue 的深度选择器并定位 td 标签。

<style lang="css" scoped>
/* ::v-deep/ .table > tbody > tr > td { */
/deep/ .table > tbody > tr > td {
max-width: 300px;
}
</style>

我希望这对那里的人有帮助。！！