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

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;
}

Answer 2

此处：https://bootstrap-vue.org/docs/components/table您可以阅读："class、thClass、tdClass等将不能与作用域CSS中定义的类一起工作；。所以这可能是一种情况，它对你不起作用。如果你想为你的thead设置样式，你可以在你的字段对象中使用样式属性，即：

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

希望这会有所帮助。

Answer 3

我唯一能让它为我工作的方法是在表上使用Vue的Deep Selector并针对td标记。

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

我希望这能帮助到外面的人。！！