vue.js - 如何修改 Vue 堆叠 b 表的样式?
问题描述
我在 bootstrap-vue 中使用了堆叠的 b-table。
<b-modal :id="infoModal.id" :title="infoModal.title" hide-footer @hide="resetInfoModal;">
<pre>
<b-table stacked sticky-header head-variant="light" :items="infoModal.content" :fields="reviewFields"></b-table>
</pre>
<template>
<div class="overflow-auto">
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
</div>
</template>
</b-modal>
这是结果:
首先,我想将标记的基线向左移动。
二、表格内容超出表格轮廓(红线)。我希望内容可以在表格的固定列中滚动。
我怎样才能得到这些效果?
解决方案
您可以在每列上设置样式
reviewFields: [
{ key: 'key0', label: 'label0', class: 'css-class' },
{ key: 'key1', label: 'label1', class: 'css-class' },
{ key: 'key2', label: 'label2', class: 'css-class' },
{ key: 'key3', label: 'label3', class: 'css-class' },
{ key: 'key4', label: 'label4', class: 'css-class' },
]
推荐阅读
- amazon-web-services - CloudWatch 事件规则未使用标签找到 EC2 目标
- swagger - 所有控制器的全局标头(nestJs swagger)
- c# - 您可以在 cshtml 中使用 Razor 页面进行布局吗
- wordpress - 插件还是主题?
- javascript - nodemon 配置文件中的详细是什么意思?
- python - 如何保存/读取来自 PyQt StandardButton 的回复
- azure - Azure ARM tempate - 创建空/默认机密的 Key Vault
- react-native - 反应本机代码内联工作,但在导入时不起作用
- python - Python re.search 获得价值
- c++ - 在不知道数组大小的情况下分配数组中的元素值