bootstrap-vue表td元素样式 [英] bootstrap-vue table td element styling

问题描述

我给b表元素的<td>标签赋予样式有一个问题.

I have an issue by giving styles to the <td> tag of b-table element.

这是模板:

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

I want to give max-width of 300px to the <td> of this table. Please help!

推荐答案

您可以在字段对象中设置tdClass属性. 但是tdClass仅接受字符串或数组，而不接受对象.因此，您只能引用CSS类.

You can set the tdClass property inside of your field object. But tdClass just accepts a string or an array, not an object. So you can only reference to a css class.

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

以及您的CSS中:

.nameOfTheClass {
   max-width: 300px;
}

这篇关于bootstrap-vue表td元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！