在给b表元素的<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。
请帮忙!
答案 0 :(得分:2)
我设法让它为我工作的唯一方法是在桌子上使用 Vue 的 Deep Selector 并定位 td 标签。
<style lang="css" scoped>
/* ::v-deep/ .table > tbody > tr > td { */
/deep/ .table > tbody > tr > td {
max-width: 300px;
}
</style>
我希望这可以帮助那里的人。!! ?
答案 1 :(得分: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;
}
答案 2 :(得分:0)
在这里:https://bootstrap-vue.js.org/docs/components/table/,您可以阅读: “ class,thClass,tdClass等将不适用于作用域CSS中定义的类”。 因此,可能是这种情况对您不起作用。 如果您想对主题进行样式设置,则可以在字段对象中使用thStyle属性,即:
{
key: 'test', label: 'Test', thStyle: { backgroundColor: '#3eef33'}
}
希望这会有所帮助。