Bootstrap-vue表格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

---

你尝试过通过CSS设置max-width吗？ - Yom T.

是的，它没有响应。 - Arevshatyan Gegham

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

---

好的，我在这里再试了一遍，只是为了确认一下，它可以工作：https://jsfiddle.net/yzjudf6b/1/ 通过使用检查器，您可以看到两个样式属性都被分配给 td 元素。 - Jns

我看它在JSFiddle上可以运行。但是在我的电脑上无法运行，抱歉 :/ - Arevshatyan Gegham

你是否正在使用最新版本的bootstrap-vue？ - Jns

@ArevshatyanGegham 请检查受影响的元素，并确保样式没有被其他东西覆盖。 - Yom T.

你的<style>标签有scoped属性吗？ - Jns

Answer 2

在这里：https://bootstrap-vue.org/docs/components/table，您可以阅读：“class、thClass、tdClass等将无法与在范围内定义的CSS类一起使用”。因此，这可能是它不能为您工作的原因。如果您想要为thead设置样式，您可以在字段对象中使用thStyle属性，例如：

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

希望这可以帮到你。

- qqmber36

Answer 3

我唯一成功的方法是使用Vue的深度选择器在表格上定位td标签。

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

我希望这能帮助到某个人。!!

- Charles Tombo