bootstrap-vue table td 元素样式
Posted
技术标签:
【中文标题】bootstrap-vue table td 元素样式【英文标题】:bootstrap-vue table td element styling 【发布时间】:2019-05-13 14:47:44 【问题描述】:我给 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 的最大宽度。
请帮忙!
【问题讨论】:
您是否尝试过通过 CSS 设置max-width
?
是的,它没有响应
【参考方案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;
【讨论】:
好的,我在这里再次尝试过,只是为了确保它有效:jsfiddle.net/yzjudf6b/1 通过使用检查器,您可以看到两个样式属性都分配给了td
元素跨度>
如果它不适合你,也许你可以创建一个小sn-p?
我看到它适用于 JSFiddle。但它在我的机器上不起作用,对不起:/
你使用的是最新版本的 bootstrap-vue 吗?
你的<style>
标签有scoped属性吗?【参考方案2】:
在这里:https://bootstrap-vue.js.org/docs/components/table/ 你可以阅读: “class、thClass、tdClass 等不适用于在作用域 CSS 中定义的类”。 所以这可能是它不适合你的情况。 如果你想设置你的头的样式,你可以在你的字段对象中使用 thStyle 属性,即:
key: 'test', label: 'Test', thStyle: backgroundColor: '#3eef33'
希望这会有所帮助。
【讨论】:
【参考方案3】:我设法让它为我工作的唯一方法是在桌子上使用 Vue 的 Deep Selector 并定位 td 标记。
<style lang="css" scoped>
/* ::v-deep/ .table > tbody > tr > td */
/deep/ .table > tbody > tr > td
max-width: 300px;
</style>
我希望这对那里的人有所帮助。!! ?
【讨论】:
以上是关于bootstrap-vue table td 元素样式的主要内容,如果未能解决你的问题,请参考以下文章