bootstrap-vue 表 td 元素样式

2024-01-06

我有一个问题,就是给<td>b-表元素的标签。

这是模板:

    <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" }
    ],

我想给最大宽度 300px<td>这张表的。 请帮忙!


您可以设置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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap-vue 表 td 元素样式 的相关文章